tab栏切换原理（排他思想：首先干掉所有人， 剩下我自己） 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         section {
 8             width: 300px;
 9             margin: 100px auto;
10             border: 1px solid #000;
11         }
12 
13         button {
14             border: 0;
15         }
16 
17         div {
18             width: 100%;
19             height: 300px;
20             background-color: pink;
21             display: none;
22         }
23 
24         .current {
25             background-color: pink;
26         }
27 
28         .show {
29             display: block;
30         }
31     </style>
32 </head>
33 <body>
34 <section>
35     <button class="current">第一个</button>
36     <button>第二个</button>
37     <button>第三个</button>
38     <button>第四个</button>
39     <button>第五个</button>
40     <div class="show">第一个盒子</div>
41     <div>第二个盒子</div>
42     <div>第三个盒子</div>
43     <div>第四个盒子</div>
44     <div>第五个盒子</div>
45 </section>
46 
47 <script>
48     let btns = document.getElementsByTagName('button');
49     let boxs = document.getElementsByTagName('div');
50     for (let i = 0; i < btns.length; i++) {
51         btns[i].onclick = function () {
52             for (let j = 0; j < btns.length; j++) {
53                 btns[j].className='';
54                 boxs[j].className='';
55             }
56             this.className='current';
57             boxs[i].className='show';
58         }
59     }
60 </script>
61 </body>
62 </html>
posted @ 2019-12-20 13:40  杨小越  阅读(482)  评论(0)    收藏  举报