js高级—tab栏切换（面向对象做法）_nav tabs js切换

作者：AllinToyou | 2024-02-08 14:08:54

踩

nav tabs js切换

    <main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>

            <!-- tab 内容 -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

        * {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

main {
    width: 960px;
    height: 500px;
    border-radius: 10px;
    margin: 50px auto;
}

main h4 {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.tabsbox {
    width: 900px;
    margin: 0 auto;
    height: 400px;
    border: 1px solid lightsalmon;
    position: relative;
}

nav ul {
    overflow: hidden;
}

nav ul li {
    float: left;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-right: 1px solid #ccc;
    position: relative;
}

nav ul li.liactive {
    border-bottom: 2px solid #fff;
    z-index: 9;
}

#tab input {
    width: 80%;
    height: 60%;
}

nav ul li span:last-child {
    position: absolute;
    user-select: none;
    font-size: 12px;
    top: 0px;
    right: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red;
    cursor: pointer;
}

.tabadd {
    position: absolute;
    /* width: 100px; */
    top: 0;
    right: 0;
}

.tabadd span {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    float: right;
    margin: 10px;
    user-select: none;
    cursor: pointer;
}

.tabscon {
    width: 100%;
    height: 300px;
    position: absolute;
    padding: 30px;
    top: 50px;
    left: 0px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}

.tabscon section,
.tabscon section.conactive {
    display: none;
    width: 100%;
    height: 100%;
}

.tabscon section.conactive {
    display: block;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

<script type="text/javascript">
    //定义一个that变量，让实例对象中的this进行赋值
    var that;
    class Tab{
        constructor(id){
            //将实力对象中的this赋值到that中
            that = this;

            //首先获取最大父盒子的元素 , 此处的this指向实力对象
            //获取需要操作的标签
            this.main = document.querySelector(id);
            // //获取最大父盒子中的所有li
            // this.lis = this.main.querySelectorAll('li');
            // // 获取最大父盒子中的所有section
            // this.sections = this.main.querySelectorAll('section');

			/*动态创建li和section 可以将选择器更换为*/
            // //获取最大父盒子中的所有li
            // this.lis = this.main.getElementsByTagName('li');
            // // 获取最大父盒子中的所有section
            // this.sections = this.main.getElementsByTagName('section');

            // 因为getElementsByTagName具有隐式遍历的作用
	

            //获取最大父盒子中的tabadd
            this.add = this.main.querySelector('.tabadd');
            //获取最大父盒子中的fisrstnav下的第一个元素标签 （li的父元素）
            this.ul = this.main.querySelector('.fisrstnav ul:first-child');
            //获取最大父盒子中的tabscon的元素标签 （tabscon父元素）
            this.fsection = this.main.querySelector('.tabscon');
            // //获取最大盒子中的icon-guanbi
            // this.remove = this.main.querySelectorAll('.icon-guanbi')


            this.init();
        }
        //设置一个初始化的函数,让相关元素绑定事件（主要就是添加相关的绑定事件）
        init(){


            //一初始化的时候就调用新的li和section（重新调用切记写在最前面，要不然添加时，最后一个li没有效果）
            this.updateNode();




            //循环li,进行添加绑定事件,此处的长度设置为实例对象中的写法//this.lis.length
            for (var i = 0; i < this.lis.length; i++) {
                // 此处为了后期与section进行绑定，利用实力对象形式设置一个变量保存每次遍历的索引
                this.lis[i].index = i;
                //会给每个li设置点击事件
                //此处测试li是否已经可以点击,拿到索引号
                // this.lis[i].onclick = function(){
                //     console.log(this.index);
                    
                // }

                //每个li设置点击事件，触发toggleTab的函数效果
                this.lis[i].onclick = this.toggleTab;

                //给每个icon-guanbi按钮进行绑定事件
                this.remove[i].onclick = this.removeTab;

                //给每个span设置鼠标双击事件
                this.spans[i].ondblclick = this.editTab;
                
                //给每个sections绑定一个双击事件（此处因为所需要用到的方法跟span设置的事件方法一样，所以此处直接调用span的双击方法）
                this.sections[i].ondblclick = this.editTab;
            }

            //添加事件不需要进行遍历
            this.add.onclick = this.addTab;

            
        }

        //重新获取所有的小li和section
        updateNode(){
            //获取最大父盒子中的所有li
            this.lis = this.main.querySelectorAll('li');
            // 获取最大父盒子中的所有section
            this.sections = this.main.querySelectorAll('section');
            //获取最大盒子中的icon-guanbi
            this.remove = this.main.querySelectorAll('.icon-guanbi')
            //获取所有的li下的第一个span
            this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')
        }




/*****************************************************************************************************/ 
        //1.切换功能
        toggleTab(){
            //在此处调用清楚样式的函数,此处的this修改为that，因为this的话只能理解为li调用了此方法
            //其中还有sections的存在，因此用that进行包含
            that.clearClass();


            //测试li是否已经可以点击,拿到索引号
            // console.log(this.index);
            
            //此处的this指向的是li这个标签（谁调用了我，我就指向谁）
            this.className = 'liactive';
            //因为this指向的是li，li中没有conactive这个类名属性，所以this.sections[thsi.index] = 'conactive';
            // 不管用，因此可以得到此conactive为constructor（实例对象）中的元素
            // this.sections[thsi.index] = 'conactive';

            //设置一个全局变量taht,对实例对象中的this进行赋值，进行调用
            //因此此处的this，修改为that
            that.sections[this.index].className = 'conactive';  

        }
        //设置一个清楚样式的函数(清除所有li和section中的类)
        clearClass(){
            for (let i = 0; i < this.lis.length; i++) {
                //清除li和sections下的所有类（此处用到排他思想处理）
                this.lis[i].className = '';
                //此处sections可以用that或者this,在调用方法时用that就可以了
                that.sections[i].className = '';  
            }
        }
/*****************************************************************************************************/ 

        //2.添加功能
        addTab(){
            //进行排他思想，让创建的标签类达到比较好的效果
            that.clearClass();


            //绑定测试
            // alert(123)
            
            //为了生成的效果好看，添加个生成随机数
            var random = Math.random();

            //(1) 创建li元素和section元素
            var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>'
            var section = ' <section class="conactive">新内容'+ random +'</section>';
            //(2) 将以下的两个元素添加到父元素中(利用insertAdjacentHTML方法进行子元素的添加，因为insertAdjacentHTML不局限于文字添加，方法中的beforeend，是将标签等信息放在盒子里面的最后一个)
            //因为addTab指向的实例对对象，因此此处用that
            that.ul.insertAdjacentHTML('beforeend',li);
            that.fsection.insertAdjacentHTML('beforeend',section);

            //此处在重新调用一次init方法;
            that.init();
        }

        // 已经设置了 updateNode() 函数重新调用li和section的个数


/*****************************************************************************************************/ 
        //3.删除功能
        //给当前函数添加事件对象(事件参数)，阻止事件冒泡行为
        removeTab(e){
            e.stopPropagation(); //利用事件参数阻止冒泡，防止出发li的点击事件
            //此时会出现新增li中的删除按钮跟当前索引取不到一起，因此将获取关闭按钮的元素放到 updateNode()方法中重新获取即可
            //引用父元素的索引号
            var index = this.parentNode.index;
            // 测试
            console.log(index);

            // remove() 方法则可以直接删除指定的元素
            that.lis[index].remove();
            that.sections[index].remove();
            //此处调用init方法，为了让init方法执行 updateNode() 方法，即可拿到新的元素进行遍历使用
            that.init();

            //当我们删除的不是选中状态的li的时候，原来的选中状态li保持不变
            //如果当前的标签存折liactive这个标签状态，就直接返回值，不必执行下面的代码
            if(document.querySelector('.liactive'))return;


            //当我们删除了选中状态的这个li的时候，让它的前一个li处于选定状态
            //让index--；从而让前一个li为选中状态
            index--;
            //index--；于此同时自动调用lis的点击事件，让sections也属于选中状态
            // that.lis[index].click();
            //利用 && 对前后的效果进行判断 （&& 与）
            that.lis[index] && that.lis[index].click();


            


        }

/*****************************************************************************************************/ 
        //4.修改功能
        editTab(){
            //先获取原来的文本文字
            var str = this.innerHTML;
            //双击禁止选定文字;
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
            //测试
            // alert(123)
            //使鼠标双击到的标签设置为文本标签
            this.innerHTML = '<input type="text" />';
            //获取input标签，将原来的文本文字赋值给input
            var input = this.children[0];
            input.value = str;
            //让文本框内的文字处于选定状态
            input.select();

            //当我们离开文本框，将文本框内的值设置给span
            input.onblur = function(){
               this.parentNode.innerHTML = this.value;
            };
            input.onkeyup = function(e){
                if(e.keyCode === 13){
                    //手动调用表单失去焦点事件 不需要鼠标离开操作
                this.blur();
                }   
            }
        }






    }

    //创建的实力对象必须存在实例函数的下面，不然执行结果为undeiful
    //首先过去最大的父盒子元素
   /*var a =  */ new Tab('#tab');
    // a.init();
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229

实现效果：

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/69366