tab栏的切换

qq_51985469

于 2023-06-24 18:17:01 发布

阅读量643

点赞数 1

本文链接：https://blog.csdn.net/qq_51985469/article/details/131364451

版权

该文章介绍了一个使用HTML结构、CSS样式和JavaScript事件处理来创建Tab栏切换效果的方法。通过添加和删除类名以及调整内容元素的显示状态，实现了标题切换与内容显示的联动。

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

切换tab 栏本质上是利用了排它思想

首先就是简单的布局

 <div class="container">
        <div class="tabbar">
            <div class="active">第一部分</div>
            <div>第二部分</div>
        </div>
        <div class="content">
            <div>
                第一部分的内容
            </div>
            <div>
                第二部分的内容
            </div>
        </div>
    </div>

<style>
        .container {
            width: 300px;
            height: 320px;
            border: 1px solid black;
            margin: 100px auto;
        }

        .tabbar {
            width: 300px;
            height: 50px;
            border-bottom: 1px solid black;
            display: flex;
        }

        .active {
            width: 150px;
            color: #fff;
            height: 50px;
            background-color: red;
        }

        .tabbar>div {
            width: 50%;
            height: 100%;
            text-align: center;
            line-height: 50px;

        }

        .tabbar>div:nth-child(1) {
            border-right: 1px solid black;
        }

        .content {
            width: 100%;
            height: 270px;
            background-color: bisque;
        }

        .content>div {
            width: 100%;
            height: 100%;
        }

        .content>div:nth-child(2) {
            display: none;
        }
    </style>

首先将第一部分加上active类名，第二部分保持原样，接下来我们仅仅需要添加和删除类名就能实现标题类的切换

1.获取dom l

 let title = document.querySelectorAll('.tabbar div')

2.循环遍历先把需要的active类名移除，在对点击的这个元素添加上active类名

for (let i = 0; i < title.length; i++) {
            title[i].onclick = function () {
                console.log(this)
                for (let i = 0; i < title.length; i++) {
                    title[i].classList.remove('active')
                }
                this.classList.add('active')
            }

        }

此时就可以实现标题栏的切换

那么现在就可以对下面的内容进行对应的隐藏比如点击的是第一个，那么其他元素的display为none。

   let title = document.querySelectorAll('.tabbar div')
        let con = document.querySelectorAll('.content div')

        for (let i = 0; i < title.length; i++) {
            title[i].onclick = function () {
                console.log(this)
                for (let i = 0; i < title.length; i++) {
                    con[i].style.display = 'none'
                    title[i].classList.remove('active')
                }
                this.classList.add('active')
                con[i].style.display = 'block'
            }

        }