微信扫一扫打赏支持

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如何实现选项卡的制作

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

 

 

 

 

 
posted @ 2018-07-03 10:44  范仁义  阅读(302)  评论(0)  编辑  收藏  举报