JavaScript基础 - 经典案例3 - tab栏选项卡切换

最新推荐文章于 2024-12-04 13:26:46 发布

原创最新推荐文章于 2024-12-04 13:26:46 发布 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #前端

JavaScript基础案例专栏收录该内容

5 篇文章

订阅专栏

本文介绍了使用JavaScript高效实现Tab栏切换的方法，通过排他思想优化，精准移除当前active类，再为选中项添加active类，以实现更加高效的切换效果。并提供了一个柯南Tab栏案例的代码示例，包括HTML、JS和CSS部分。

通常我们用 js 写 tab 栏切换功能会用到 排他思想，即干掉其他人，留下我自己

但也可以用一个更有效率的方法：找出那个特殊的人，精准干掉他，放过其他无辜的人，然后留下我自己

实现过程：假设需要切换的样式类为 active类，要干掉那个唯一的active类

document.querySelector('.active').classList.remove('active')

之后再去给自己设置 active类就可以啦！

// this指需要切换的tab元素
this.classList.add('active')

柯南tab栏案例练习：

代码示例：

HTML：

<div class="card">
    <ul class="tab">
        <li class="tab-items active">柯南</li>
        <li class="tab-items">小兰</li>
        <li class="tab-items">小哀</li>
        <li class="tab-items">基德</li>
    </ul>
    <div class="info">
        <div class="main active">
            <p>
                外表看似小孩，其真实身份是高中生侦探——工藤新一。
            </p>
        </div>
        <div class="main">
            <p>
                新一的青梅竹马，一直喜欢着新一，在他突然消失后等待着他的归来。
            </p>
        </div>
        <div class="main">
            <p>
                外表是小孩，但其实是黑衣组织的一员，新一被灌下的毒药（APTX4869）的开发者，代号雪莉。
            </p>
        </div>
        <div class="main">
            <p>
                变装达人。轰动世界的神出鬼没的怪盗。总是会送上预告函，将警察玩弄于股掌之间，被世人称作“怪盗基德”。
            </p>
        </div>
    </div>
</div>

JS：

// 获取元素
let tabs = document.querySelectorAll('.tab .tab-items')
let mains = document.querySelectorAll('.info .main')

// 监听tab栏点击事件
for (let i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', function(){
        // 切换tab栏样式
        // 将原本有active类的那个tab的active类移除掉
        document.querySelector('.tab-items.active').classList.remove('active')

        // 给触发点击事件的tab增加active类
        this.classList.add('active')

        // 切换下方内容区
        // 隐藏原本显示的那个内容区
        document.querySelector('.main.active').classList.remove('active')

        // 显示当前tab对应的内容区
        mains[i].classList.add('active')
    })
}

CSS：

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.card {
    width: 400px;
    margin: 100px auto;
}

.tab {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 400px;
    height: 50px;
}

.tab .tab-items {
    width: 94px;
    line-height: 50px;
    background-color: rgb(207, 139, 138);
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.tab .tab-items.active {
    background-color: rgb(171, 197, 222);
}

.info {
    height: 250px;
}

.info .main {
    display: none;
    width: 400px;
    height: 250px;
    padding: 15px;
    box-sizing: border-box;
    background-color: rgb(171, 197, 222);
    font-size: 21px;
}

.info .main.active {
    display: block;
}

结束；