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. 【LiteOS】LiteOS移植常见问题

    发现很多人在LiteOS的移植过程中总会遇到一些问题,现在简单做一些总结.后续有新的问题提再继续补充. 1.CMSIS版本导致的问题 问题现象一般如下图所示,编译后报错,Undefined symbo ...

  2. 快速理解spark-on-k8s中的external-shuffle-service

    [摘要] external-shuffle-service是Spark里面一个重要的特性,有了它后,executor可以在不同的stage阶段动态改变数量,大大提升集群资源利用率.但是这个特性当前在k ...

  3. 详解TCP连接的“三次握手”与“四次挥手”(下)

    上文链接: 详解TCP连接的"三次握手"与"四次挥手"(上) 四.TCP的四次挥手(Four-Way Wavehand) 0.前言 对于"三次握手&q ...

  4. [TimLinux] django html如何实现固定表头

    1. 需求 表格很长,这个时候就希望表格头部不动,而只是表格内容行支持滚动功能. 2. 方法 两张表:一张表(THeader)负责头部字段的显示,另一张表(TBody)负责内容行字段的显示. 两张表都 ...

  5. HDU3870-Caught these thieves(最小割-&gt;偶图-&gt;最短路问题)

    A group of thieves is approaching a museum in the country of zjsxzy,now they are in city A,and the m ...

  6. Python深入之python内存管理机制（重点）

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:醍醐三叶   关于python的存储问题, (1)由于python中 ...

  7. 基于FPGA的LCD+CMOS视频采集显示使用小结

    基于FPGA的LCD+CMOS视频采集显示 液晶显示器采用扫描模式,RGB888 电源采用:+5V供电 usb供电有时候会出现供电不足的问题 显示器接口有两种选择:16bit或24bit  分别对应 ...

  8. 【MYSQL】安装MySQL端口被占用

    出现问题: 安装mysql时,发现端口被占用 解决方法: 方法一: 修改端口号:3308,3309等都可以 方法二: 按键盘"win+r" → 打开 cmd → 输入netstat ...

  9. flutter学习之环境配置

    1.Android SDK通常目录: 用户->用户名->AppData->Local=>Android->Sdk 2.不知道的情况下,打开Android Studio,然 ...

  10. Spring Cloud第十篇 | 分布式配置中心Config

    ​ 本文是Spring Cloud专栏的第十篇文章,了解前九篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Clo ...