技巧一、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>
效果图如下：
