用ES6写选项卡

最新推荐文章于 2022-07-26 11:19:18 发布

小李学软件

最新推荐文章于 2022-07-26 11:19:18 发布

阅读量1.1k

点赞数 1

分类专栏： ES6学习文章标签： js es6 javascript 前端

本文链接：https://blog.csdn.net/lzDevastator/article/details/104933104

版权

ES6学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

html和css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .clearFix {
            *zoom: 1;
        }

        .clearFix::after {
            display: block;
            height: 0;
            content: '.';
            clear: both;
            visibility: hidden;
        }

        .cursor {
            cursor: pointer;
        }

        .block {
            display: block;
        }

        .main {
            width: 80%;
            margin: 100px auto;
            border: 1px solid salmon;
        }

        .boxTop {
            width: 100%;
        }

        .boxTop ul {
            float: left;
        }

        .boxTop li {
            list-style: none;
            position: relative;
            float: left;
            max-width: 150px;
            width: 100px;
            padding: 0 10px;
            text-align: center;
            line-height: 1;
            height: 50px;
            line-height: 50px;
        }

        .boxTop li {
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

        .boxTop li span:nth-of-type(even) {
            position: absolute;
            right: 0;
            top: 0;
            width: 15px;
            height: 15px;
            color: #fff;
            background-color: #000;
            line-height: 10px;
            font-size: 15px;
            text-align: center;
            border-bottom-left-radius: 100%;
        }

        .boxTop li.liActive {
            border-bottom: 2px solid #fff;
            margin-bottom: -1px;
        }

        .boxTop .tabadd {
            float: right;
            width: 30px;
            height: 30px;
            border: 1px solid;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            margin: 10px;
        }

        .sec div {
            display: none;
            width: 100%;
            height: 300px;
        }

        .sec {
            border: 1px solid #ccc;
            margin-top: -1px;
        }

        .sec .secActive {
            display: block;
        }
    </style>
</head>

<body>
    <section class="main" id="Tab">
        <div class="boxTop clearFix">
            <ul class="clearFix">
                <li class="liActive"><span class="block">测试1</span><span class="block cursor">&times;</span></li>
                <li><span class="block">测试2</span><span class="block cursor">&times;</span></li>
            </ul>
            <div class="tabadd clearFix cursor">
                <span class="block">+</span>
            </div>
        </div>
        <div class="sec" id="sec">
            <div class="secActive">测试1</div>
            <div>测试2</div>
        </div>
    </section>
    <script src="js/tabToggle.js"></script> 
</body>

</html>

js

面向对象版tab栏切换添加功能

点击+可以实现添加新的选项卡和内容
第一步：创建新的选项卡li 和新的内容标签
第二步：把创建的两个元素添加到对应的父元素中。
以前的做法：动态创建元素createElement，但是元素里面的内容较多，需要innerHTML赋值在appendChild
追加到父元素里面
现在高级的做法：利用insertAjacentHTML()可以直接把字符串格式添加到父元素中
appendChild不支持追加字符串的子元素，利用insertAjacentHTML支持追加字符串的元素

面向对象版tab栏切换删除功能

点击❌可以删除当前的li选项当前的内容展示区域
❌是没有索引号的，但是他的父级li有，这个索引号正好是我们想要的
所以核心思路是：点击❌是可以删除这个索引号相对应的li和内容部分

面向对象版tab栏切换编辑功能

双击选项卡li或者对应的展示的那内容，就可以实现修改功能
双击事件是：ondblclick
如果双击文字，此时需要双击禁止选中文字
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()
核心思路：双击文字时，在里面生成一个文本框，当时去焦点或者按下回车然后把文字赋值给元素即可

var that;
class Tab {
    constructor(id) {
        that = this;
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll("li");
        this.ul = this.main.querySelector("ul")
        this.sec = document.getElementById("sec");
        this.div = this.sec.querySelectorAll("div");
        //this.add = this.main.querySelector(".tabadd");
        this.init();
    }
    init() {
        //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;
        }
    }
    //切换功能
    toggleTab() {
        for (var i = 0; i < that.lis.length; i++) {
            that.lis[i].className = "";
            that.div[i].className = ""；
        }
        this.className = "liActive"
        that.div[this.index].className = "secActive"
    }
}
new Tab("#Tab")