jQuery实现tab标签切换效果

技巧一、jQuery :eq() 选择器

定义和用法

:eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。

经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素。

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

定义和用法

index() 方法返回指定元素相对于其他指定元素的 index 位置。

这些元素可通过 jQuery 选择器或 DOM 元素来指定。

注释：如果未找到元素，index() 将返回 -1。

CSS部分

 <style>
 *{
 margin:;
 padding:;
 list-style:none;
 }
 #main {
 width:600px;
 margin:200px auto;
 }
 #tab {
 overflow:hidden;
 background:#000;
 border:1px solid #000;
 }
 #tab li{
 float:left;
 color:#fff;
 height:30px;
 cursor:pointer;
 line-height:30px;
 padding:0 20px;
 }
 #tab li.showed {
 color:#000;
 background:#ddd;
 }
 #contents {
 border:1px solid #000;
 border-top-width:;
 }
 #contents ul {
 line-height:150px;
 display:none;
 margin:0 30px;
 padding:10px 0;
 }
 </style>

HTML部分

 <div id="main">
     <ul id="tab">
         <li class="showed">tab1</li>
         <li>tab2</li>
         <li>tab3</li>
     </ul>
     <div id="contents">
         <ul style="display:block;">
            <span>模块一</span>
         </ul>
         <ul>
            <span>模块二、模块二</span>
         </ul>
         <ul>
            <span>模块三、模块三、模块三</span>
         </ul>
     </div>
 </div>

jQuery部分

 <script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
 <script>
     $(function(){
         window.onload = function()
         {
             var lis = $('#tab li'); 
 7             var uls = $('#contents ul');

             lis.click(function(){
                 var li_selected = $(this);//选中的li分类
                 var num = li_selected.index();//相对于同胞元素的位置
                 lis.removeClass();//清空liCSS属性
                 li_selected.addClass('showed');//选中li添加属性
                 uls.css('display','none');//隐藏所有ul标签
                 uls.eq(num).css('display','block');    //展示选中的li所对应的ul内容
             })
         }
     });
 </script>

效果图如下：