首页>>TAB标签>>淡隐淡现选项卡渐隐渐显tab标签(2013-10-04)

淡隐淡现选项卡渐隐渐显tab标签

 渐隐渐显tab标签,同样可以控制当前显示第几个项目

淡隐淡现选项卡渐隐渐显tab标签
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div class="layout">  
  2.     <div class="row2">  
  3.         <div class="JQ-slide">  
  4.             <ul class="JQ-slide-nav">  
  5.                 <li class="on">导航菜单</li>  
  6.                 <li>表单</li>  
  7.                 <li>焦点图</li>  
  8.             </ul>  
  9.             <div class="JQ-slide-content">  
  10.                 <ul class="newsList">  
  11.                     <li><a href="http://www.freejs.net/article_daohangcaidan_27.html">纯CSS的大型下拉菜单,支持放图片在下拉导航里面</a></li>  
  12.                 </ul>  
  13.                 <ul class="newsList">  
  14.                     <li><a href="http://www.freejs.net/article_biaodan_59.html">星级选择器 提交代码</a></li>  
  15.                 </ul>  
  16.                 <ul class="newsList">  
  17.                     <li><a href="http://www.freejs.net/article_jiaodiantu_53.html">jquery左右滚动焦点图banner图片,鼠标经过显示上下页</a></li>  
  18.                 </ul>  
  19.             </div>  
  20.         </div>  
  21.     </div>  
  22. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(function (){  
  3.   
  4.       
  5.     /* 淡隐淡现选项卡 */  
  6.     $(".row2 .JQ-slide").Slide({  
  7.         autoPlay:false,  
  8.         effect:"fade",  
  9.         speed:"normal",  
  10.         timer:30000  
  11.     });  
  12.       
  13. });  
  14. </script>  

 

CSS Code
  1. .row2{border:1px solid #E1E1E1;position:relative;width:300px;}  
  2. .row2 .JQ-slide{background:url(images/side_bg1.jpg) no-repeat center top;}  
  3. .row2 .JQ-slide-nav{float:none;overflow:hidden;zoom:1;padding:15px;}  
  4. .row2 .JQ-slide-nav li{float:left;display:inline;background:url(images/slide_navbg.gif) no-repeat -70px 0;width:69px;height:23px;text-align:center;color:6b6b6b;font-weight:bold;text-align:center;line-height:22px;cursor:pointer;margin-right:5px;}  
  5. .row2 .JQ-slide-nav li.on{background-position:0 0;color:white;}  
  6. .row2 .JQ-slide-nav li.on a:link, .row2 .JQ-slide-nav li.on a:visited, .row2 .JQ-slide-nav li.on a:hover, .row2 .JQ-slide-nav li.on a:active{color:white;}  
  7. .row2 .JQ-slide-content{position:relative;overflow:hidden;width:300px;height:120px;}  
  8. .row2 .JQ-slide-content .newsList{position:absolute;top:0;left:0;background:white;}  

 


原文地址:http://www.freejs.net/article_tabbiaoqian_61.html