js-tab切换处理 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8"></meta>
 5     <title>js-tab切换处理</title>
 6     <style>
 7         .box{
 8             width: 400px;
 9             margin: 100px auto;
10             border: 1px solid #cccccc;
11         }
12         /*让底部所有的div隐藏*/
13         .bottom div{
14             width: 100%;
15             height: 300px;
16             background-color: pink;
17             display: none;
18         }
19         /*让底部class为show的显示出来*/
20         .bottom .show{
21             display: block;
22         }
23         .tab_select{
24             background-color: rosybrown;
25         }
26     </style>
27     <script>
28         window.onload = function () {
29             //1.拿到所有的button
30             var btns = document.getElementsByTagName("button");
31             //2.拿到所有的bottom div
32             var divs = document.getElementById("divs").getElementsByTagName("div");
33             //3.循环遍历所有的button
34             for(var i=0; i<btns.length; i++){
35                 //添加一个属性 index, setAttribute 添加自定义属性
36                 btns[i].index = i;
37                 //给所有的button添加事件
38                 btns[i].onclick = function () {
39                     //把所有的btn 类名都设置为 空
40                     for(var j=0; j<btns.length; j++){
41                         btns[j].className = ""; //先把全部的都类名都设置空
42                         divs[j].className = "";  //把全部的div 都隐藏
43                     }
44                     //设置当前button为选中
45                     this.className = "tab_select";
46                     //显示出对应的div
47                     divs[this.index].className = "show";
48                     console.log(this.index);
49                 }
50             }
51 
52         }
53     </script>
54 </head>
55 <body>
56     <div class="box">
57         <div class="top">
58             <button class="tab_select">第一个</button>
59             <button>第二个</button>
60             <button>第三个</button>
61             <button>第四个</button>
62             <button>第五个</button>
63         </div>
64         <div class="bottom" id="divs">
65             <div class="show">1号盒子</div>
66             <div>2号盒子</div>
67             <div>3号盒子</div>
68             <div>4号盒子</div>
69             <div>5号盒子</div>
70         </div>
71     </div>
72 </body>
73 <script>
74 
75 </script>
76 </html>

 

posted @ 2017-08-18 14:04  宋发元  阅读(293)  评论(0)    收藏  举报