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

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

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面向对象动态添加标签页的更多相关文章

js 面向对象动态添加标签
有点逻辑上代码 thml布局点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
EasyUI创建异步树形菜单和动态添加标签页tab
创建异步树形菜单创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...
EasyUI 布局 - 动态添加标签页（Tabs）
首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"&g ...
easyui 动态添加标签页，总结
步骤 1:创建 Tabs <div style="margin-bottom:10px"> <a href="#" class="e ...
EasyUI中动态生成标签页
这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...
C# 后台动态添加标签(span,div) 以及模板添加
很多时候.我们需要在后台用C#代码添加html标签.而不是在html源码中添加. 比如在html源码中简单的一个input 标签 <input type="type" nam ...
javascript的document中的动态添加标签
document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScri ...
FineUI 点击按钮添加标签页
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat=&quo ...
innerHTML动态添加标签的注意事项
在使用javascript动态添加页面上元素时,我们经常会使用DOM去逐个地将节点添加到文档碎片中,再将整个文档节点添加到DOM树中.其实还有一种方法动态添加元素:innerHTML. 我最近要将一大 ...

随机推荐

在Linux下生成crypt加密密码
[摘要]当我们用红帽Kickstart脚本或useradd或其他方式写东西的时候,经常会需要用到crypt命令加密生成的密码格式.那么,有没有其他方式可以生成这种格式的密码?事实上,方法有很多 1.我 ...
编译原理算法3.8 LR分析 c++11实现
LR分析简介 LR分析是应用最广泛的一类分析方法,它是实用的编译器功能中最强的分析器,其特点是: 1,采用最一般的无回溯移进-规约方法. 2,可分析的文法是LL文法的真超集. 3,能够及时发现错误,及 ...
十一、springboot 配置log4j2以及打包成zip文件
前言其实我们前面已经配置了日志,但是最近总感觉日志日志格式看的不舒服,并且每次打包都是一个jar 文件,lib都包含在jar 中,每次做很小的修改都需要重新替换jar文件,jar文件会比较大,传输起 ...
SpringBoot-HelloWorld(三)
HelloWorld 学一个新的框架,不写helloworld是没有灵魂的,嘿嘿准备工作我们将学习如何快速的创建一个Spring Boot应用,并且实现一个简单的Http请求处理.通过这个例子对S ...
SI522和RC522/ZS3801/FM17520的区别
小编最近在测试一颗新的芯片,是国内知名厂家中科微研发的,主打超低功耗的厂家. 经过测试和比较小编发现相对于MFRC522,SI522可以完全替换,不需要做任何更改,同时接受模式下功耗低10mA左右, ...
ecosystem.config
ecosystem.config.js module.exports = { apps : [{ name : 'TOB_NODE', script : 'app.js', // 开发环境变量 env ...
nbuoj2784 倒水
题目:http://www.nbuoj.com/v8.83/Problems/Problem.php?pid=2784 一天,TJ买了N个容量无限大的瓶子,开始时每个瓶子里有1升水.接着TJ决定只保留 ...
这十道经典Python笔试题，全做对算我输
经常有小伙伴学了Python不知道是否能去找工作,可以来看下这十道题检验你的成果: 1.常用的字符串格式化方法有哪些?并说明他们的区别 a. 使用%,语法糖 print("我叫%s,今年%d ...
使用flatbuffers
问题张三是个java程序员,他写产生数据的程序.李四是个python程序员,他要用python处理张三产生的数据.最直观常用的方法就是张三用java把产生的数据保存成csv或者xml文件,然后李四用 ...
unity3d 随机添加树木
开放世界随机地图才是最重要的.. 随机生成树木 Terrain.terrainData //获取地形设置 terrainData.treePrototypes {get;set;} //获取或设置树木 ...

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

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

随机推荐

热门专题

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

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