淡隐淡现选项卡渐隐渐显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