微信扫一扫打赏支持

js进阶 11-22/23 js如何实现选项卡

js进阶 11-22/23 js如何实现选项卡

一、总结

一句话总结：通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起，通过控制div标签的display属性可以实现选项卡的选项切换。

 

1、某些样式设置了，但是出不来效果的原因可能是什么？

优先级会导致某些特效出不来

现在设置的优先级低于之前的

可以通过加父标签的方式来增加优先级

 

 

2、如何增加样式的优先级？

可以通过加父标签的方式来增加优先级

 

3、如何实现一组标签中点某个标签，这个标签的样式改变？

动态给点的标签添加一个自己写好的激活样式

71                 oli[this.index].className="active";

 

4、如何消除一个元素的所有类？

dom对象的className赋空值

67                     oli[j].className="";

 

5、如何让一个隐藏的元素显示？

将dom对象的style的display属性设置为none

68                     li_content[j].style.display='none'

 

6、如何获取一个id为content的div里面的另外的div？

getElement的链式写法（因为getElement是document的方法，其实也是dom对象的方法）

57         var li_content=    document.getElementById('content').getElementsByTagName('div')

 

 

二、js如何实现选项卡

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>选项卡2</title>
 6     <style>
 7     *{margin:0px;padding: 0px }
 8     body{padding: 50px}
 9     #list{
10         list-style-type: none; 
11         height: 30px;
12         font-size: 14px
13     }
14     #list li{
15         width: 80px;
16         margin-right: 5px;
17         height: 30px; line-height: 30px; 
18         text-align: center;
19         border: solid green 1px;border-bottom: none;
20         border-radius: 5px 5px 0 0;
21         float: left;
22         cursor: pointer;
23     }
24     #content div{
25         width: 400px;
26         height: 150px;
27         border:1px solid green;
28         display: none;
29         background: rgba(100,50,20,0.2);
30      }
31      #content div.show{display: block;}
32      #list li:hover{
33              background: rgba(100,50,20,0.4);
34         }
35     .active{background: rgba(100,50,20,0.2);}
36     </style>
37 </head>
38 <body>
39 <div id="tab">
40     <ul id="list">
41         <li class="active">第一部分</li>
42         <li>第二部分</li>
43         <li>第三部分</li>
44     </ul>
45     <div id="content">
46         <div class="show">JS进阶......</div>
47         <div>JQ精讲......</div>
48         <div>JS+JQ+CSS3特效、技巧、案例专题......</div>
49     </div>
50 </div>
51     <script>
52         // var list=document.getElementById('list')
53         // var content=document.getElementById('content')
54         // var oli=list.getElementsByTagName('li')
55         // var li_content=    content.getElementsByTagName('div')
56         var oli=document.getElementById('list').getElementsByTagName('li')    
57         var li_content=    document.getElementById('content').getElementsByTagName('div')
58         for(var i=0;i<oli.length;i++){
59             oli[i].index=i
60             oli[i].onclick=function(){
61                 
62                 //首先获取到当前被点击li的索引
63                 //alert(this.index)
64 
65                 //点击后让相应的div显示到当前
66                 for(var j=0;j<li_content.length;j++){
67                     oli[j].className="";
68                     li_content[j].style.display='none'
69                 }
70                 li_content[this.index].style.display='block';
71                 oli[this.index].className="active";
72                 
73             }
74         }
75     </script>
76 </body>
77 </html>

 

 

 

 

 

 
posted @ 2018-06-30 20:59  范仁义  阅读(401)  评论(0)  编辑  收藏  举报