zoukankan      html  css  js  c++  java
  • ES6面向对象 动态添加标签页

    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{
        960px;
        height:500px;
        border-radius:10px;
        margin:50px auto;
    }
    main h4 {
        height:100px;
        line-height:100px;
        text-align:center;
    }
    .tabsbox{
        900px;
        margin:0 auto;
        height:400px;
        border:1px solid lightsalmon;
        position:relative;
    }
    nav ul {
        overflow:hidden;
    }
    nav ul li {
        float:left;
        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{
        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;
        20px;
        height:20px;
        line-height:20px;
        text-align:center;
        border:1px solid #ccc;
        float:right;
        margin:10px;
        user-select:none;
    }
    .tabscon{
        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;
        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

    点击添加按钮添加标签

    点击叉叉按钮关闭标签

  • 相关阅读:
    关于 java jdk 环境变量的配置
    Jquery ajax 参数 详解
    关于百度world 编辑器改变上传图片的保存路径图片不显示的问题
    asp.net 中日期的格式化显示的方法
    sql server数据库中 smallint, int ,bigint ,tinyint的区别与长度
    create sequence
    INSERT高级应用
    TRUNCATE TABLE
    CREATE DATABASE LINK
    bulk
  • 原文地址:https://www.cnblogs.com/chalkbox/p/11828553.html
Copyright © 2011-2022 走看看