有点逻辑 上代码

thml布局

点击查看代码 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>面向对象 Tab</title>

    <link rel="stylesheet" href="./styles/tab.css">

    <link rel="stylesheet" href="./styles/style.css">

</head>

<body>

    <main>

        <h4>

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

        </h4>

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

            <!-- tab 标签 -->

            <nav class="fisrstnav">

                <ul>

                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>

                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>

                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>

                </ul>

                <div class="tabadd">

                    <span>+</span>

                </div>

            </nav>

            <!-- tab 内容 -->

            <div class="tabscon">

                <section class="conactive">测试1</section>

                <section>测试2</section>

                <section>测试3</section>

            </div>

        </div>

    </main>

    <script src="./tabs.js"></script>

</body>

</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;

    height: 400px;

    margin: 0 auto;

    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: -18px;

    right: 0;

    display: inline-block;

    height: 20px;

}

.tabadd {

    position: absolute;

    /* width: 100px; */

    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;

}

删除iconfont字体图标

点击查看代码 
@font-face {font-family: "iconfont";

  src: url('./iconfont/iconfont.eot?t=1553960438096'); /* IE9 */

  src: url('./iconfont/iconfont.eot?t=1553960438096#iefix') format('embedded-opentype'), /* IE6-IE8 */

  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABmwAAAJrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp4fwE2AiQDCAsGAAQgBYRtBzAbpQXIrrApw71oi3CCOyzEy8RvE4yIN8TD036/zp03qCYRjaJZNBFFS/gREoRGipQKofjuNrb+9XbTqrmXcqWzfTRDqFqWkhAJzYToaE6LQ7Q30CirRqSKMnj58DdIdrNAdhoTQJa5VGfLrtiAy+lPoAcZdUC57UljTR4TMAo4oL0xiqwYG8YueIHPCdTqYajty/t+bUpmrwvEnUK42lQhLMssVy1UNhzN4kmF6vSQVvMY/T5+HEU1SUXBbti7uBBrx++cgqJULp0GhAgBna5AgSkgE0eN6R1NwTitNt0yAI5VG7wr/8AljmoX7K+zq+tBF1Q8k9JTPWp1AjnJDgCzmM3bU0V31dsvV3M2eC6fHjaGfX/qS7U5Gr58vj6uD0bgxudyrV/OtHHyP+NZnpO1txbktjdY+3FB61+7nxeOzq8niGYnRwT3v3aZxeXf6rrNxl5//49WlEtZUUL1Pj3Bv1EO7MuG2namrCkbvcnApLUJtWpRhv2tzlRLx43kQ7WO2/FW6c5QqDZEZnYKFeosoVK1NdSa5E/XaVM1Ra7BhAEQmk0kjV5QaLbIzG5U6HRRqTkK1DqJtivrjMT1zJaNnIsihAiyQE3JdbszcW0Xiadzdl4d8UO0HSUGNDNXzl2hifYSO5pPjrorgdjUAAavoa5TKDZVUXD3kuuOOzh70fShvUiN2owtNsRxIREIIiATUCYpGO2aqXy/CxEeHcfuaKrLDiGbQ5kcEMsNIK8M5qCmR3mn8RFHOpcECBtlAAwWIZ2OAqV5kQoJXHvShORYBzrDZKhhb3uT8QPlrA3bmsKZV6i89DiTV2o1AAAA') format('woff2'),

  url('./iconfont/iconfont.woff?t=1553960438096') format('woff'),

  url('./iconfont/iconfont.ttf?t=1553960438096') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

  url('./iconfont/iconfont.svg?t=1553960438096#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont {

  font-family: "iconfont" !important;

  font-size: 16px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

.icon-guanbi:before {

  content: "\e676";

}

js代码

点击查看代码 
var that;

class Tab {

    constructor(id) {

        // 定义全局this

        that = this;

        // 获取元素

        this.main = document.querySelector(id)

        //获取加号按钮

        this.add = this.main.querySelector('.tabadd')

        //获取li的父元素

        this.ul = this.main.querySelector('.fisrstnav ul:first-child')

        //获取section的父元素

        this.fsection = this.main.querySelector('.tabscon')

        this.init();

    }

    //初始化的方法 处理所有点击事件

    init() {

        this.updateNode();

        this.add.onclick = this.addTab;

        //init初始化操作让相关的元素绑定事件

        for (var i = 0; i < this.lis.length; i++) {

            // 给li添加一个索引

            this.lis[i].index = i;

            //因为点击做切换功能 所以点击了li直接等于toggleTab切换操作函数

            this.lis[i].onclick = this.toggleTab;

            //x号按钮跟小li是一样的 所以写在li的for循环里

            this.remove[i].onclick = this.removeTab;

            //给每一个span添加双击事件

            this.spans[i].ondblclick = this.editTab;

            //给每一个sections添加双击事件

            this.sections[i].ondblclick = this.editTab;

        }

    }

    //获取所有小li和section

    updateNode() {

        //获取所有的小li

        this.lis = this.main.querySelectorAll('li')

        //获取所有的section

        this.sections = this.main.querySelectorAll('section')

        //获取x号关闭的按钮

        this.remove = this.main.querySelectorAll('.icon-guanbi')

        //获取所有的span

        this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')

    }

    //1、切换功能

    toggleTab() {

        that.clearClass();

        //点击了li就给他的class添加liactive类名

        this.className = 'liactive'

        //点击li内容也跟着变所以

        that.sections[this.index].className = 'conactive'

    }

    //点击每个li就要清楚其他样式 所以定义一个专门清楚样式函数

    clearClass() {

        //再次循环li

        for (var i = 0; i < this.lis.length; i++) {

            this.lis[i].className = '';

            this.sections[i].className = '';

        }

    }

    //2、添加功能

    addTab() {

        //添加之前清除掉所以小li

        that.clearClass()

        //生成一个随机数

        var random = Math.random()

        //1.点击创建li元素和section元素

        var li = ' <li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>'

        var section = '<section class="conactive">测试' + random + '</section>'

        //2.把这两个元素追加到对应的父元素里面

        //以前创建元素createElement，但是元素里面内容比较多，需要innerHTML复制在appendChild追加到父元素里面 这样是比较繁琐的

        //现在有个高级做法：利用insertAdjacentHTML()可以直接把字符串元素添加到父元素中 afterbegin在元素内容的第一个子节点之前插入beforeend插入元素内容最后一个子节点

        that.ul.insertAdjacentHTML('beforeend', li)

        that.fsection.insertAdjacentHTML('beforeend', section)

        that.init();

    }

    //3、删除功能

    removeTab(e) {

        //阻止冒泡 防止触发li的切换点击事件

        e.stopPropagation();

        //他的爸爸li有索引 所以index=他爸爸的索引parentNode.index

        var index = this.parentNode.index

        console.log(index);

        //根据索引删除对应的li和section

        that.lis[index].remove();

        that.sections[index].remove();

        //删除完要重新获取所有的元素

        that.init();

        //当我们删除的不是选中状态li的时候，原来的选中状态li保持不变 只有一个if不需要花括号

        if (document.querySelector('.liactive')) return

        //当我们删除了选中状态的这个li的时候，让它当前一个li处于选定状态

        index--;

        //手动调用我们的点击事件 不需要鼠标触发

        that.lis[index] && that.lis[index].click()

    }

    //4、修改功能

    editTab() {

        // 此函数方法的this指向span

        //一双就获取原先文本

        var str = this.innerHTML;

        //双击代码禁止选定文字

        window.getSelection ? window.getSelection().removeAllRanges() : document.getSelection.empty()

        console.log('双击了');

        this.innerHTML = '<input type="text" />';

        //input是他的第一个孩子

        var input = this.children[0];

        input.value = str

        //让文本框里面的文字处于选定状态

        input.select();

        //当鼠标离开文本框（失去焦点）把文本框里面的值给span

        input.onblur = function () {

            //input的父亲的值parentNode.innerHTML===等于自己的值

            this.parentNode.innerHTML = this.value

        }

        //当按下回车键的时候可以把文本框里面的值给span

        input.onkeyup = function (e) {

            if (e.keyCode === 13) {

                //手动调用表单失去焦点事件 不需要鼠标离开操作

                this.blur()

            }

        }

    }

}

// 实例化tab对象 传给constructor接收

new Tab('#tab');

// 创建一个实例

// var tab = new Tab('#tab');

// 这样比较繁琐

// tab.init();

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

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

    HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

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

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

  3. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  4. JS & JQuery 动态添加 select option

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...

  5. js实现动态添加事件

    js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...

  6. js JQ动态添加div标签

    function renderList(data){ var str = ''; for(var i = 0; i < data.length; i++){ // 动态添加li str += ' ...

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

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

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

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

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

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

随机推荐

  1. 论如何在服务器上部署一个自己的web前端项目

    就在前两天,有新人通过邮箱问到笔者,如何部署自己的web前端项目?笔者在此详细介绍. 一.购买云服务器 配置用户名密码.安全组 二.下载Xshell于Xftp工具 用于登录服务器和文件上传 三.在li ...

  2. 安全强化机制——SELinux

    1.基本 SELINUX 安全性概念 SELINUX(Security Enhanced Linux),意思是安全增强型Linux, 是可保护你系统安全性的额外机制 在某种程度上 , 它可以被看作是与 ...

  3. Linux核心知识

    电脑:辅助人脑的工具 现在的人们几乎无时无刻都会碰电脑!不管是桌上型电脑(桌机).笔记型电脑(笔电).平板电脑.智慧型手机等等,这些东西都算是电脑.虽然接触的这么多,但是,你了解电脑里面的元件有什么吗 ...

  4. HashSet的存储原理

    HashSet的底层用哈希散列表来存储对象(默认长度为16的数组),假如: Set set=new HashSet(); set.add(obj); 内部存储过程为:定义h=obj.hashCode, ...

  5. UNION / UNION ALL 区别

    Union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序: Union All:对两个结果集进行并集操作,包括重复行,不进行排序: 使用union all: select top 5 ...

  6. Python - 面向对象编程 - __new()__ 和单例模式 

    单例模式 这是一种设计模式 设计模式是前任工作的总结和提炼,通常,被人们广泛流传的设计模式都是针对某一特定问题的成熟的解决方案 使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性 单 ...

  7. angularjs实现购物清单

    HTML: 1:要定义ng-app,在html上定义ng-app="App"; 2:在body上定义ng-controller="ToDoCtrl" 3: &l ...

  8. ElasticSearch集成SpringData史上最全查询教程

    1.简单介绍 springboot 使用springdata操作es,ElasticsearchRepository使用QueryBuilder构造查询条件 2.集成es //maven集成 < ...

  9. Spring Boot 2.x 之 Spring Data JPA, Hibernate 5

    1. Spring Boot常用配置项 基于Spring Boot 2.0.6.RELEASE 1.1 配置属性类 spring.jpa前缀的相关配置项定义在JpaProperties类中, 1.2 ...

  10. [推荐]MyBatis 核心技术与面试 34 讲

    MyBatis 核心技术与面试 34 讲 职业生涯中常被问到: 如何成为某方面的高手? 如何快速搞定某项技术? 我现在的水平处于什么阶段? -- 我暗暗想,我们从小学到中学到大学,经历了大考三六九.小 ...