JS中的Tab切换如何实现

Asiabo_Z

已于 2023-11-08 19:30:15 修改

阅读量60

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-11-08 19:06:37 首次发布

本文链接：https://blog.csdn.net/Asiabo_Z/article/details/134296138

版权

在我们的项目中，使用频率较高的一共就那几样，那么其中的Tab切换是怎么实现的呢

首先我们先说一下tab切换是什么

在CSS中我们可以通过hover设置来通过父元素控制子元素的显示与隐藏，但是这也仅仅局限于父元素控制子元素，并且鼠标离开父元素子元素的效果就是消失，那么我们该如何实现点击导航栏使对应的内容进行切换呢，这个时候我们就需要用到JS来进行完成了，在这里我会用原生的JS来完成tab切换。

HTML代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>

<body>
    <div class="tab-box" id="tab">
        <!-- tab部分 -->
        <nav>
            <ul>
                <li class="li-active">
                    <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="tab-add">
                <span>+</span>
            </div>
        </nav>
        <!-- 内容区域 -->
        <div class="tab-con">
            <section class="con-active">标签1内容部分</section>
            <section>标签2内容部分</section>
            <section>标签3内容部分</section>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>

</html>

CSS代码

* {
    margin: 0px;
    padding: 0px;
}

ul {
    list-style: none;
}

.tab-box {
    width: 800px;
    height: 400px;
    border: 1px solid skyblue;
    margin: 0 auto;
}

.tab-box nav {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-box nav ul {
    width: 90%;
    height: 100%;
    display: flex;
}

.tab-box nav ul .li-active {
    border-bottom: 2px solid white;
}

.tab-box nav ul li {
    width: 100px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-right: 1px solid #ccc;
    position: relative;
}

.tab-box nav ul li input {
    width: 80px;
    height: 30px;
}

.tab-box nav ul li .iconfont {
    position: absolute;
    top: -22px;
    right: 0px;
}

.tab-box nav .tab-add {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 15px;
    margin-right: 10px;
}

.tab-box nav .tab-add:hover {
    cursor: pointer;
}

.tab-box .tab-con {
    width: 100%;
    height: 339px;
    /* background-color: pink; */
}

.tab-box .tab-con section {
    width: 100%;
    height: 100%;
    display: none;
    padding: 20px;
    box-sizing: border-box;
}

.tab-box .tab-con section textarea {
    width: 100%;
    height: 100%;
    font-size:40px;
    letter-spacing: 1em;
    font-family: "华文行楷";
    resize: none;
    padding: 4px;
    box-sizing: border-box;
}

.tab-box .tab-con .con-active {
    display: block;
}

JS代码

// 面向对象的变成思想
// 把事务拆分成一个个对象 然后分工合作
var that;
class Tab {
    constructor(id) {
        that = this;
        this.tabContent = document.querySelector(id);
        this.tab_con = document.querySelector('#tab .tab-con');
        // 获取元素
        this.ul = document.querySelector('#tab ul');
        this.tab_add = document.querySelector('#tab .tab-add');
        this.init();
    }

    //初始化事件
    init() {
        this.update();
        console.log(1)
        for (var i = 0; i < this.lis.length; i++) {
            console.log(this.tab);
            this.lis[i].index = i;
            this.lis[i].onclick = this.tab;
            this.lis[i].ondblclick = this.liEdit;
        }
        this.tab_add.onclick = this.add;
    }

    // 更新
    update() {
        console.log(2)
        this.lis = document.querySelectorAll('#tab ul li');
        this.section = document.querySelectorAll('#tab .tab-con section');
    }

    // 切换事件
    tab() {
        that.siblings();
        this.className = "li-active";

        console.log(this.index)
        that.section[this.index].className = "con-active";
    }

    // 排他
    siblings() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = "";
            this.section[i].className = "";
        }
    }

    // 添加
    add() {
        that.siblings();
        // console.log(1)
        var num = that.lis.length;
        num++
        that.ul.innerHTML += `
            <li class='li-active'>
                <span>标签${num}</span>
                <span class="iconfont icon-guanbi"></span>
            </li >
        `
        that.tab_con.innerHTML += `
                <section class='con-active'>标签${num}内容部分</section>
        `
        that.update();
        that.init();
    }

    liEdit() {
        this.innerHTML = `<input type='text' value=${this.innerText} class='txt'>`
        var txt = document.querySelector(".txt");
        txt.onblur = function () {
            // var text = txt.value;
            this.parentNode.innerHTML = `
            <li>
                <span>${this.value}</span>
                <span class="iconfont icon-guanbi"></span>
            </li>
            `
        }
    }

}

var p1 = new Tab('#tab');
console.log(p1)

这个代码相较于后续更新后较为复杂，大家可以作为参考使用，后续会更新TAB更为简单的代码片段供大家使用

有用的话大家点个关注，以后会发布更多的前端组件

Asiabo_Z

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS中的Tab切换如何实现

在CSS中我们可以通过hover设置来通过父元素控制子元素的显示与隐藏，但是这也仅仅局限于父元素控制子元素，并且鼠标离开父元素子元素的效果就是消失，那么我们该如何实现点击导航栏使对应的内容进行切换呢，这个时候我们就需要用到JS来进行完成了，在这里我会用原生的JS来完成tab切换。这个代码相较于后续更新后较为复杂，大家可以作为参考使用，后续会更新TAB更为简单的代码片段供大家使用。首先我们先说一下tab切换是什么。
复制链接

扫一扫