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() -->

巴特西

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

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

一、总结

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

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

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

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

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

最新文章

热门文章