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

 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="utf-8" />

     <title>ES6</title>

     <link rel="stylesheet" type="text/css" href="http://tab.wuliwu.top/style.css" />

 </head>

 <body>

     <main>

         <h4>

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

         </h4>

         <div class="tabsbox" id="tab">

             <nav class="firstnav">

             <ul>

                 <li class="liactive"><span>标签1</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li>

                 <li><span>标签2</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li>

                 <li><span>标签3</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li>

             </ul>

             <div class="tabadd">

                 <span>+</span>

             </div>

             </nav>

         <div class="tabscon">

             <section class="conactive">内容1</section>

             <section>内容2</section>

             <section>内容3</section>

         </div>

         </div>

     </main>

     <script src="http://tab.wuliwu.top/tab.js"></script>

 </body>

 </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代码点击展开

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代码点击展开

初始页面

点击标签2

点击添加按钮添加标签

点击叉叉按钮关闭标签

ES6面向对象 动态添加标签页的更多相关文章

  1. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  3. EasyUI 布局 - 动态添加标签页（Tabs）

    首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"&g ...

  4. easyui 动态添加标签页，总结

    步骤 1:创建 Tabs <div style="margin-bottom:10px"> <a href="#" class="e ...

  5. EasyUI中动态生成标签页

    这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...

  6. C# 后台动态添加标签(span,div) 以及模板添加

    很多时候.我们需要在后台用C#代码添加html标签.而不是在html源码中添加. 比如在html源码中简单的一个input 标签 <input type="type" nam ...

  7. javascript的document中的动态添加标签

    document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScri ...

  8. FineUI 点击按钮添加标签页

    <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat=&quo ...

  9. innerHTML动态添加标签的注意事项

    在使用javascript动态添加页面上元素时,我们经常会使用DOM去逐个地将节点添加到文档碎片中,再将整个文档节点添加到DOM树中.其实还有一种方法动态添加元素:innerHTML. 我最近要将一大 ...

随机推荐

  1. c获取shell中的参数

    问题背景 在Linux中我们会使用到shell,来完成输入参数的获取,就如同下面的形式,这种形式在进行多语言编程和调用有着非常重要的作用 一.传递的过程 1.1 原理模型如下: 1.1.1 可执行sh ...

  2. oracle监听查看、启动和停止

    oracle监听查看.启动和停止 查看监听lsnrctl status 停止监听lsnrctl stop 启动监听lsnrctl start

  3. 使用 Python 验证数据集中的体温是否符合正态分布

    数据集地址:http://jse.amstat.org/datasets/normtemp.dat.txt 数据集描述:总共只有三列:体温.性别.心率 #代码 from scipy import st ...

  4. 度及拓扑图的使用-UESTC1958学霸周选课

    学霸周选课 Time Limit: 1000 MS     Memory Limit: 128 MB Submit Status 众所周知周大爷不仅编程了得,专业课成绩更是名列前茅,恰巧又到了选课的季 ...

  5. ZOJ 3195 Design the city (LCA 模板题)

    Cerror is the mayor of city HangZhou. As you may know, the traffic system of this city is so terribl ...

  6. 第一节知识点：.net与c#的概念

    1.什么是.net          .net一般指的是.NET Framework框架,一种平台,一种技术:.NET 是微软的新一代技术平台,以构建互联互通的应用系统.这些应用程序的开发和运行必须有 ...

  7. ARTS-S golang单元测试

    golang单元测试 在$GOPATH的src目录下建目录demo_unittest 在目录demo_unittest下建文件calc.go,内容如下: package demo_unittest f ...

  8. Java 将Excel转为图片、html、XPS、XML、CSV

    通过文档格式转换,可满足不同办公场合对文档操作的需求.本文将介绍转换Excel文档为其他常见文档格式的方法.通过文中的方法,可支持将Excel转换为包括PDF.图片.html.XPS.XML.CSV. ...

  9. drf源码分析系列---节流(访问频率限制)

    使用 from rest_framework.throttling import AnonRateThrottle from rest_framework.generics import ListAP ...

  10. java基础篇二

    引言 滴,第二天卡. 五.关键字 -static         -初始化顺序             -静态变量和静态语句块优先于实例变量和普通语句块,静态变量和静态语句块的初始化顺序取决于它们在代 ...