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如何实现选项卡的制作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选项卡3</title> 6 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 7 <style> 8 *{margin: 0px;padding: 0px} 9 body{padding: 50px} 10 ul {list-style-type: none;} 11 #list{ 12 height: 30px;line-height: 30px; 13 margin-bottom: 2px 14 } 15 #list li{ 16 width: 100px;text-align: center; 17 border:1px solid green; 18 background: rgba(100,50,20,0.2); 19 float:left; 20 cursor: pointer; 21 } 22 #content{ 23 width: 304px;height: 150px; 24 border:1px solid green;border-top: none; 25 } 26 #content div{display: none; } 27 #content div.show{display: block;} 28 #list li.active{ 29 background: #fff; 30 border-bottom: none; 31 } 32 33 </style> 34 </head> 35 <body> 36 <div id="tab"> 37 <ul id="list"> 38 <li class="active">第一部分</li> 39 <li>第二部分</li> 40 <li>第三部分</li> 41 </ul> 42 <div id="content"> 43 <div class="show">JS进阶......</div> 44 <div>JQ精讲......</div> 45 <div>JS+JQ+CSS3特效、技巧、案例专题......</div> 46 </div> 47 </div> 48 <script> 49 $(function(){ 50 var $li=$('#list li') 51 $li.click(function(){ 52 $(this).addClass('active').siblings().removeClass('active'); 53 $('#content div').eq($li.index(this)).show().siblings().hide() 54 }) 55 }) 56 </script> 57 </body> 58 </html> 59 60 <!--// alert($li.index(this)) 61 //index() 62 返回指定元素相对于其他指定元素的 index 位置 63 eq($li.index(this)).css('display','block').siblings().css('display','none') 64 // $('#content div').eq($li.index(this)).show().siblings().hide() -->