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. BZOJ 3033 太鼓达人（DFS+欧拉回路）

    Description 七夕祭上,Vani牵着cl的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队伍成员XLk.Poet_shy和ly ...

  2. MooseFS 分布式存储

    一.MooseFS介绍 MooseFS主要由管理服务器(master).元日志服务器(Metalogger).数据存储服务器(chunkserver)构成. 管理服务器:主要作用是管理数据存储服务器, ...

  3. unity3d 随机添加树木

    开放世界随机地图才是最重要的.. 随机生成树木 Terrain.terrainData //获取地形设置 terrainData.treePrototypes {get;set;} //获取或设置树木 ...

  4. JavaScript中的"奇奇怪怪"

    filter等方法的隐式转化 var list = [1,,2,,0,5,9];console.log(list[1]); // console: undefinedconsole.log(list[ ...

  5. 【JS】380- JavaScript 正则新特性

    概括 如果你曾用 JavaScript 进行过复杂的文本处理操作,那么你将会喜欢 ES2018 中引入的新特性.本文将详细介绍第9版标准如何提高 JavaScript 的文本处理能力. 大多数编程语言 ...

  6. 【JS】302- 回调地狱解决方案之Promise

    为什么出现Promise 在javascript开发过程中,代码是单线程执行的,同步操作,彼此之间不会等待,这可以说是它的优势,但是也有它的弊端,如一些网络操作,浏览器事件,文件等操作等,都必须异步执 ...

  7. 使用docker安装虚拟机并打开ssh连接

    一.需求 最近有个需求,要连接很多个linux系统进行测试软件功能,但是我这里只有几个虚拟机,所以需要使用docker来安装几十个或者上百个虚拟机来进行测试. 二.安装docker 这里就不演示怎么安 ...

  8. java获取每月的第一天和最后一天

    // 获取当前年份.月份.日期 Calendar cale = null; cale = Calendar.getInstance(); // 获取当月第一天和最后一天 SimpleDateForma ...

  9. c++ const问题小记

    int* a = new int; const int* b = a; const int* a = new int; int* b = (int*)a; const int m = 10; int ...

  10. 为什么要使用Unix时间戳

    概念: UNIX时间戳:Unix时间戳(英文为Unix epoch, Unix time, POSIX time 或 Unix timestamp) 是从1970年1月1日(UTC/GMT的午夜)开始 ...