JS 面向过程和面向对象实现 Tab选项卡切换

Posted 2021-03-04 RitaD

* html布局和css样式在最下

基本效果如图：

　　　　

---

1、面向过程

 

 1     <script>
 2         // 1. 找到所有的按钮
 3         // 2. 给按钮添加事件
 4         // 3. 根据按钮的下标显示对应的内容
 5 
 6         // 1. 找到所有的按钮
 7         var btns = document.querySelector(".btns").children;
 8         var boxs = document.querySelectorAll(".box")
 9 
10         for(var i = 0 ; i < btns.length ; i ++){
11             // 2. 给按钮添加事件 鼠标点击
12             btns[i].onclick = function(){
13                 // 删除掉元素的类名active
14                 removeClass( btns , "active"); 
15                 // +=是为了不覆盖原有的class名字
16                 this.className += " active";
17                 /*获取当前元素的下标
18                 循环绑定事件的时候，不能在事件处理函数之中使用i获取，
19                     因为for循环是在循环结束之后，才会执行事件。此时的i是循环结束的i
20                 所以 此处用this来指向当前发生事件的元素
21                 */
22                 // 如果this和btns里面的某一项相等了，那么就判断下标是对应的下标
23                 for(var k = 0 ; k < btns.length ; k ++){
24                     // for循环找到所有的按钮
25                     // 如果button是this对应的button
26                     if(btns[k] === this){
27                         break;
28                     }
29                 }
30                 // 3.根据按钮的下标显示对应的内容
31                 removeClass( boxs , "active"); 
32                 boxs[k].className += " active";
33             }
34         }
35 
36         // 删除元素的active类名
37         function removeClass( ele_list , class_Name){ //元素组，类名
38             // 遍历整个元素组
39             for(var i = 0 ; i < ele_list.length ;i ++){
40                 // 首先 找到className字符串，把它的类名拆分成数组
41                 var class_arr = ele_list[i].className.split(" ");
42                 // 找到对应的类名
43                 var index  = class_arr.indexOf(class_Name);
44                 // 如果存在这个类名，就删除掉这个class名
45                 if(index !== -1){
46                     class_arr.splice( index , 1);
47                     // 类名再赋值  数组变为字符串
48                     ele_list[i].className = class_arr.join(" ");
49                 }
50             }
51         }
52     </script>

---

2、面向对象

 1     <script>
 2         /* 1、OOA：面向对象分析
 3                 1)选择元素
 4                 2)事件添加器  把功能变成工具
 5                 3)下标获取器
 6                 4)类名清除器
 7                 5)类名添加器
 8         */
 9 
10         // 2、OOD：面向对象设计
11         // 构造函数
12         // function Table(){
13 
14         // }
15         // // 初始化功能
16         // Table.prototype.init = function(){
17         //     // 选择元素调用
18         //     // 调用bindEvent功能
19         // }
20 
21         // // 元素选择功能
22         // Table.prototype.$ = function(){
23 
24         // }
25         
26         // // 事件添加功能
27         // Table.prototype.bindEvent = function(){
28         //     // 获取下标
29         //     // 使用类名清除器
30         //     // 使用类名添加器
31         // }
32 
33         // // 下标获取器
34         // Table.prototype.getIndex = function(){
35 
36         // }
37 
38         // // 类名清除器
39         // Table.prototype.clearClass = function(){
40 
41         // }
42 
43         // // 类名添加器
44         // Table.prototype.addClass = function(){
45 
46         // }
47     //------------------------------
48         // 3、OOP 面向对象编程
49         function Table(){}
50         // 初始化
51         Table.prototype.init = function( options ){
52             // 选择元素调用
53             this.btns = this.$(options.btn);
54             this.contents = this.$(options.content);
55             // 调用事件添加功能
56             this.bindEvent();
57         }
58         // 元素选择
59         Table.prototype.$ = function( selector ){
60             return document.querySelectorAll(selector);
61         }
62         // 事件添加
63         Table.prototype.bindEvent = function(){
64             for(var i = 0 ; i < this.btns.length ; i ++){
65                 this.btns[i].addEventListener("click" , function( index ){
66                     // 类名清除
67                     this.clearClass();
68                     // 类名添加
69                     this.addClass( index );
70                 }.bind(this , i))//this指向实例对象，同时获取下标
71             }
72         }
73         // // 下标获取器   用bind也能获取
74         // Table.prototype.getIndex = function(){
75 
76         // }
77         // 类名清除器
78         Table.prototype.clearClass = function(){
79             for(var k = 0; k < this.btns.length; k ++){
80                 this.btns[k].className = this.btns[k].className.replace(/\\s?active/g,"");
81                 this.contents[k].className = this.contents[k].className.replace(/\\s?active/g,"");
82             }
83         }
84         // 类名添加器
85         Table.prototype.addClass = function( index ){
86             this.btns[index].className += " active"
87             this.contents[index].className += " active"
88         }
89 
90         var table = new Table();
91         table.init({
92             btn:".btn",
93             content : ".box"
94         });
95     </script>

---

HTML布局

 1     <div class="container">
 2         <div class="btns">
 3             <button data-index="0" class="btn active">1</button>
 4             <button data-index="1" class="btn">2</button>
 5             <button data-index="2" class="btn">3</button>
 6         </div>
 7         <div class="content">
 8             <div class="box active">1</div>
 9             <div class="box">2</div>
10             <div class="box">3</div>
11         </div>
12     </div>

CSS样式

 1     <style>
 2         .container{
 3             width: 360px;
 4             height: 277px;
 5             border: 10px solid #000;
 6             overflow: hidden;
 7             margin: 0 auto;
 8         }
 9         .content{
10             height: 257px;
11             text-align: center;
12             line-height: 257px;
13             font-size: 100px;
14             position: relative;
15         }
16         .box{
17             width: 100%;
18             height: 100%;
19             position: absolute;
20             background: #fff;
21             display: none;
22         }
23         button.active{
24             color: aliceblue;
25             background: black;
26         }
27         .box.active{
28             display: block;
29             z-index: 1;
30         }
31     </style>