tab栏切换

原生tab栏切换

css

 1 <style>
 2     .box {
 3         width: 400px;
 4         margin:100px auto;
 5         border:1px solid #ccc;
 6     }
 7     .top button.purple {
 8         background-color: purple;
 9     }
10     .bottom div{
11         width:100%;
12         height: 300px;
13         background-color: pink;
14         display: none;
15     }
16     .bottom div.show{
17         display:block;
18     }
19 
20 </style>

html

 1 <div class="box">
 2     <div class="top" id="top">
 3         <button class="purple">第一个</button>
 4         <button>第二个</button>
 5         <button>第三个</button>
 6         <button>第四个</button>
 7         <button>第五个</button>
 8     </div>
 9     <div class="bottom" id="divs">
10         <div class="show">1号盒子</div>
11         <div>2号盒子</div>
12         <div>3号盒子</div>
13         <div>4号盒子</div>
14         <div>5号盒子</div>
15     </div>
16 </div>

js

 1 <script>
 2     function Tab(){
 3         this.btns = document.getElementById("top").children;
 4         this.divs = document.getElementById("divs").children;
 5         this.init = function(){
 6             for(let i = 0; i < this.btns.length; i++){
 7                 this.btns[i].onclick = function(){
 8                     this.clearAll();
 9                     this.showFn(i);/
10                 }.bind(this)
11             }
12         }
13         this.clearAll = function(){
14             for(var i = 0; i < this.btns.length; i++){
15                  this.btns[i].className = "";
16                  this.divs[i].className = "";
17             }
18         }
19         this.showFn = function(index){
20             //this是实例， 看showFn执行有没有点，有点，showFn点前面的this；点前面的this是实例
21             this.btns[index].className = "purple";
22             this.divs[index].className = "show"
23         }
24     }
25     var res = new Tab();
26     res.init();
27 </script>

 

原文链接:https://www.cnblogs.com/xiaoyaolang/p/11906594.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有