jQuery实现tab标签切换效果

技巧一、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>

效果图如下：

 

 

转载于:https://www.cnblogs.com/php-71/p/6656180.html