JavaScript 面向对象TAB栏切换

最新推荐文章于 2022-04-04 11:50:47 发布

他不是文青

最新推荐文章于 2022-04-04 11:50:47 发布

阅读量605

点赞数

文章标签： js css javascript html

本文链接：https://blog.csdn.net/weixin_43681578/article/details/114527780

版权

本文介绍了一个动态标签页的实现，包括点击切换、添加、删除和编辑功能。通过HTML、CSS和JavaScript，详细阐述了各个功能的代码实现，提供了清晰的注释，帮助理解每个步骤。此外，还包含了一个完整的示例，展示了如何通过双击修改tab项和内容项的文字。

摘要由CSDN通过智能技术生成

一、功能要求：

1、点击 tab 栏，可以切换效果.
2、点击 + 号，可以添加 tab 项和内容项.
3、点击 x 号，可以删除当前的 tab 项和内容项.
4、双击tab项文字或者内容项文字，可以修改里面的文字内容.

在这里插入图片描述

二、代码实现

代码每一步都有注解，在此就不一一赘述。

1. 结构 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态标签页</title>
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="../../font/font_2099015_z5uhbhlgbqn/iconfont.css">
</head>
<body>
    <div class="tabBox" id="tab">
        <!-- tab 标签 -->
        <div class="nav">
            <ul>
                <li class="liactive"><span>测试1</span> <span class="icon"></span></li>
                <li><span>测试2</span> <span class="icon"></span></li>
                <li><span>测试3</span> <span class="icon"></span></li>
            </ul>

            <div class="tabadd">
                <span>+</span>
            </div>
        </div>


        <!-- tab 内容 -->
        <div class="tabscon">
            <section class="conactive">测试1</section>
            <section>测试2</section>
            <section>测试3</section>
        </div>

    </div>


    <script src="./JS/index.js"></script>
</body>
</html>

2. 样式 index.css

* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}
ul {
    list-style: none;
}

/* tab 标签 */
#tab input {
    width: 80%;
    height: 60%;
}
.tabBox {
    width: 800px;
    height: 500px;
    margin: 50px auto;
    border: 1px solid lightsalmon;
}
.nav {
    position: relative;
    height: 100px;
}
ul li {
    position: relative;
    float: left;
    width: 80px;
    border-right: 1px solid #4c4c4c;
    text-align: center;
    line-height: 100px;

}
.liactive {
    border-bottom: 2px solid #fff;
    z-index: 9;
}

.tabadd {
    position: absolute;
    right: 10px;
    top: 25px;
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,.3);
}
.tabadd span {
    font-size: 50px;
    line-height: 40px;
    margin-left: 6px;
    cursor: pointer;
}
.icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
}
.icon::after{
    position: absolute;
    top: -42px;
    right: 0;
    font-family: iconfont;
    content: '\ea42';
    font-size: 12px;
}

/* tab 内容 */
.tabscon {
    height: 400px;
    padding: 20px 20px ;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}
section {
    display: none;
}
.conactive {
    display: block;
    width: 400px;
    height: 200px;
}

3. 行为 index.js

var that; // 定义一个全局变量
class Tab {
    constructor(id) {
        // 获取元素
        that = this;  // 将 that 指向 tab
        this._main = document.querySelector(id);
        console.log(this._main);
        this.add = this._main.querySelector('.tabadd');
        this.ul = this._main.querySelector('.nav ul:first-child');
        this.fasection = this._main.querySelector('.tabscon');
        this.init();
    }
    //初始化
    init () {
        // 更新节点
        this.updateNode();
        // 增加事件
        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._section[i].ondblclick = this.editTab;
        }
    }
    // 更新节点
    updateNode() {
        this._lis = this._main.querySelectorAll('li');
        this._section = this._main.querySelectorAll('section');
        this.remove = this._main.querySelectorAll('.icon');
        this.spans = this._main.querySelectorAll('.nav  li span:first-child');
    }
    // 切换
    toggleTab() {
        that.clearClass();
        this.className = "liactive";   // 此处 this 指向 li
        that._section[this.index].className = "conactive";  // 由于 li 下没有section，故用 that (指向tab)
    }

    // 删除类
    clearClass() {
        for (var i = 0; i < this._lis.length; i++) {
            this._lis[i].className = "";
            this._section[i].className = "";
        }
    }
    //添加
    addTab() {
        that.clearClass();
        var random = Math.random();
        // 创建 新元素
        var li = '<li class="liactive"><span>新选项卡</span> <span class="icon"></span></li>';
        var action = '<section class="conactive">测试XXX ' + random + '</section>'
        // 添加新元素
        that.ul.insertAdjacentHTML("beforeend", li);
        that.fasection.insertAdjacentHTML("beforeend", action);
        that.init();
    }

    //删除
    removeTab(e) {
        e.stopPropagation();  // 防止事件冒泡，出现 li 的索引
        var index = this.parentNode.index;
        console.log(index);
        that._lis[index].remove();
        that._section[index].remove();
        that.init();   // 元素删除后再获取一次节点  节点更新
        // 当我们删除的不是选中状态的 li ，原来的选中状态 li 保持不变
        if(document.querySelector('.liactive')) return;
        index--;
        that._lis[index] && that._lis[index].click();   // 手动调用点击事件  当删除一个 li 将焦点处于前一个 li
    }

    //修改
    editTab() {
        var str = this.innerHTML;
        // 双击不会选中文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML = " <input type='text' /> ";
        var input = this.children[0];
        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');

总结

加油！！！

他不是文青

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 面向对象TAB栏切换

一、功能要求：1、点击 tab 栏，可以切换效果.2、点击 + 号，可以添加 tab 项和内容项.3、点击 x 号，可以删除当前的 tab 项和内容项.4、双击tab项文字或者内容项文字，可以修改里面的文字内容.二、代码实现代码每一步都有注解，在此就不一一赘述。1. 结构 index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫