技巧一、jQuery :eq() 選擇器
定義和用法
:eq() 選擇器選取帶有指定 index 值的元素。
index 值從 0 開始，所有第一個元素的 index 值是 0（不是 1）。
經常與其他元素/選擇器一起使用，來選擇指定的組中特定序號的元素。
技巧二、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>模塊二、模塊二</span> 13 </ul> 14 <ul> 15 <span>模塊三、模塊三、模塊三</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>
效果圖如下：
