jQuery實現tab標籤切換效果

技巧1、jQuery :eq() 選擇器

定義和用法

:eq() 選擇器選取帶有指定 index 值的元素。

index 值從 0 開始，全部第一個元素的 index 值是 0（不是 1）。

常常與其餘元素/選擇器一塊兒使用，來選擇指定的組中特定序號的元素。

技巧2、jQuery DOM 元素方法 - index() 方法

定義和用法

index() 方法返回指定元素相對於其餘指定元素的 index 位置。

這些元素可經過 jQuery 選擇器或 DOM 元素來指定。

註釋：若是未找到元素，index() 將返回 -1。

CSS部分

 1 <style>
 2 *{
 3 margin:0;
 4 padding:0;
 5 list-style:none;
 6 }
 7 #main {
 8 width:600px;
 9 margin:200px auto;
10 }
11 #tab {
12 overflow:hidden;
13 background:#000;
14 border:1px solid #000;
15 }
16 #tab li{
17 float:left;
18 color:#fff;
19 height:30px;    
20 cursor:pointer;    
21 line-height:30px;
22 padding:0 20px;
23 }
24 #tab li.showed {
25 color:#000;
26 background:#ddd;
27 }
28 #contents {
29 border:1px solid #000;
30 border-top-width:0;
31 }
32 #contents ul {
33 line-height:150px;
34 display:none;    
35 margin:0 30px;
36 padding:10px 0;
37 }
38 </style>

HTML部分

 1 <div id="main">
 2     <ul id="tab">
 3         <li class="showed">tab1</li>
 4         <li>tab2</li>
 5         <li>tab3</li>
 6     </ul>
 7     <div id="contents">
 8         <ul style="display:block;">
 9            <span>模塊一</span>
10         </ul>
11         <ul>
12            <span>模塊2、模塊二</span>
13         </ul>
14         <ul>
15            <span>模塊3、模塊3、模塊三</span>
16         </ul>
17     </div>
18 </div>

jQuery部分

 1 <script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
 2 <script>
 3     $(function(){
 4         window.onload = function()
 5         {
 6             var lis = $('#tab li'); 
 7             var uls = $('#contents ul');
 8             
 9             lis.click(function(){
10                 var li_selected = $(this);//選中的li分類
11                 var num = li_selected.index();//相對於同胞元素的位置
12                 lis.removeClass();//清空liCSS屬性
13                 li_selected.addClass('showed');//選中li添加屬性
14                 uls.css('display','none');//隱藏全部ul標籤
15                 uls.eq(num).css('display','block');    //展現選中的li所對應的ul內容
16             })
17         }
18     });
19 </script>

效果圖以下：