ES6 面向对象动态添加标签页

关注

发布于: 2021 年 04 月 07 日

基于 ES6 面向对象的 Tabs 标签切换，可以自定义

1.HTML 页面，CSS 和 JS 已经引入，直接复制即可

1 <!DOCTYPE html> 2  3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5     <meta charset="utf-8" /> 6     <title>ES6</title> 7     <link rel="stylesheet" type="text/css" href="http://tab.wuliwu.top/style.css" /> 8 </head> 9 <body>10     <main>11         <h4>12             ES6面向对象 动态添加标签页13         </h4>14         <div class="tabsbox" id="tab">15             <nav class="firstnav">16             <ul>17                 <li class="liactive"><span>标签1</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li>18                 <li><span>标签2</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li>19                 <li><span>标签3</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li>20             </ul>21             <div class="tabadd">22                 <span>+</span>23             </div>24             </nav>25         <div class="tabscon">26             <section class="conactive">内容1</section>27             <section>内容2</section>28             <section>内容3</section>29         </div>30         </div>31 32     </main>33     <script src="http://tab.wuliwu.top/tab.js"></script>34 </body>35 </html>
HTML代码

复制代码

2. CSS

*{    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:-10px;    right:0;    display:inline-block;    height:20px;}.tabadd {    position:absolute;    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;}.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;}
CSS代码点击展开

复制代码

3. JS

var that;class Tab {    constructor(id) {        that = this;        this.main = document.querySelector(id);                this.add = this.main.querySelector(".tabadd");        this.ul = this.main.querySelector('.firstnav ul:first-child');        this.fsection = this.main.querySelector('.tabscon');        this.init();    }    init() {        this.updateNode();        //init 初始化操作，绑定相关的绑定事件         this.add.onclick = this.addTab;        for (var i = 0; i < this.lis.length; i++) {            this.lis[i].index = i;//添加一个索引号            this.lis[i].onclick = this.toggleTab;            this.remove[i].onclick = this.removeTab;            this.spans[i].ondblclick = this.editTab;            this.sections[i].ondblclick = this.editTab;        }    }    //动态添加元素，需要重新获取对应的元素    updateNode() {        this.lis = this.main.querySelectorAll("li");        this.sections = this.main.querySelectorAll("section");        this.remove = this.main.querySelectorAll('.iconfont');        this.spans = this.main.querySelectorAll('.firstnav li span:first-child');    }    //1.切换功能    toggleTab() {        that.clearClass();        this.className = 'liactive';        that.sections[this.index].className = 'conactive';    }    //清楚所有li和scction的类    clearClass() {        for (var i = 0; i < this.lis.length; i++) {            this.lis[i].className = '';            that.sections[i].className = '';        }    }    //2.添加功能    addTab() {        that.clearClass();        var random = Math.random();        var li = '<li class="liactive"><span>新加标签</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li>';        var section = '<section class="conactive">内容 ' + random + '</section>';        that.ul.insertAdjacentHTML('beforeend', li);        that.fsection.insertAdjacentHTML('beforeend', section);        that.init();    }    //3.删除功能    removeTab(e) {        e.stopPropagation();//阻止冒泡 防止出发li 的切换事件        var index = this.parentNode.index;//获取索引号等于父元素的索引号        //根据索引号删除对应的li和section  remove（）方法可以直接删除指定元素        that.lis[index].remove();        that.sections[index].remove();        that.init();        //当删除的不是选中状态的li时，原来的选中状态保持不变        if (document.querySelector('.liactive')) return;        //当删除选中状态的li时，前一个li处于选定状态        index--;        //手动调用点击事件，如果存在索引号则触发，否则不触发点击事件        that.lis[index] && that.lis[index].click();    }    //4.修改功能    editTab() {        var str = this.innerHTML;        //双击禁止选定文字        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();        this.innerHTML = '<input type="text" />';        var input = this.children[0];//定义inpot等于span的第一个子元素        input.value = str;        //自动选定文本框内所有文字        input.select();        //当我们离开文本框时，将文本框的值给span        input.onblur = function () {            this.parentNode.innerHTML = this.value;        }        input.onkeyup = function (e) {            if (e.keyCode === 13) {                //按下回车键 手动调用表单失去焦点事件                this.blur();            }        }    }}new Tab("#tab");//实例一个对象
JS代码点击展开