ES6面向對象動態添加標簽頁

本文轉載自查看原文 2019-11-10 00:00 422 ES6/ html/ javascript

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代碼

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代碼點擊展開

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代碼點擊展開

初始頁面

點擊標簽2

點擊添加按鈕添加標簽

點擊叉叉按鈕關閉標簽

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Js面向對象動態添加標簽頁，Tab欄切換 ES6面向對象 JavaScript面向對象(高級）——ES6 ES6新增—ES6中的對象、面向對象、面向對象的繼承、面向對象和繼承的應用 JQuery動態添加標簽 chrome 向群組中添加標簽頁 jquery 動態添加標簽而且指定樣式 EasyUI創建異步樹形菜單和動態添加標簽頁tab JavaScript面向對象輕松入門之封裝(demo by ES5、ES6、TypeScript) JavaScript面向對象輕松入門之多態(demo by ES5、ES6、TypeScript)

ES6面向對象 動態添加標簽頁

免責聲明！

ES6面向對象動態添加標簽頁