js进阶 11-24 jquery如何实现选项卡的制作

js进阶 11-24 jquery如何实现选项卡的制作

一、总结

一句话总结：ul>li做选项卡的选项卡头，多个div做选项卡的内容，点到对应的li，就切换到对应的div，用index()获取li索引，与div联系。

1、如何获取一个元素所在父亲中同类孩子的索引？

index()方法

53                 $('#content div').eq($li.index(this)).show().siblings().hide()

2、如何选择除自己之外的所有同级？

没必要用not()方法，用siblings()就足够了，简单好用

52                 $(this).addClass('active').siblings().removeClass('active');

3、除clear:both之外还有什么好方法可以清楚浮动？

设置margin-bottom，因为这样就能保证不在同一行（在多行），float的效果自然影响不到

11         #list{
12             height: 30px;line-height: 30px;
13             margin-bottom: 2px
14         }

二、11-24 jquery如何实现选项卡的制作

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>选项卡3</title>
     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
     <style>
         *{margin: 0px;padding: 0px}
         body{padding: 50px}
         ul {list-style-type: none;}
         #list{
             height: 30px;line-height: 30px;
             margin-bottom: 2px
         }
         #list li{
             width: 100px;text-align: center;
             border:1px solid green;
             background: rgba(100,50,20,0.2);
             float:left;
             cursor: pointer;
         }
         #content{
             width: 304px;height: 150px;
             border:1px solid green;border-top: none;
         }
         #content div{display: none;    }
         #content div.show{display: block;}
         #list li.active{
             background: #fff;
             border-bottom: none;
         }

     </style>
 </head>
 <body>
 <div id="tab">
     <ul id="list">
         <li class="active">第一部分</li>
         <li>第二部分</li>
         <li>第三部分</li>
     </ul>
     <div id="content">
         <div class="show">JS进阶......</div>
         <div>JQ精讲......</div>
         <div>JS+JQ+CSS3特效、技巧、案例专题......</div>
     </div>
 </div>
     <script>
         $(function(){
             var $li=$('#list li')
             $li.click(function(){
                 $(this).addClass('active').siblings().removeClass('active');
                 $('#content div').eq($li.index(this)).show().siblings().hide()
             })
         })
     </script>
 </body>
 </html>

 <!--// alert($li.index(this))
  //index()
 返回指定元素相对于其他指定元素的 index 位置
 eq($li.index(this)).css('display','block').siblings().css('display','none')
             // $('#content div').eq($li.index(this)).show().siblings().hide() -->