js实现tab栏切换

最新推荐文章于 2024-09-18 18:24:27 发布

_江屿_

最新推荐文章于 2024-09-18 18:24:27 发布

阅读量432

点赞数 1

分类专栏： JavaScript 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_52191385/article/details/134824266

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript实现一个带有头部选项栏的Tab切换功能，点击头部选项时，中间内容模块仅显示对应的内容，其他内容隐藏，采用排他思想和querySelectorAll方法进行元素操作。

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

实现思路：
（1）整个tab栏是由2个div模块组成，分别是头部选项栏和中间内容模块（蓝色框）。

（2）头部选项栏点击其中任意一个，当前点击的一栏底色及字体颜色发生改变，其余不变。用排他思想实现。

（3）用for循环为头部选项栏所有元素绑定点击事件。

（4）中间的内容模块会跟随选项栏变化，因此显示隐藏的模块要放在点击事件的里边。且要满足：中间模块显示的内容要和上面的选项栏一一对应。

（5）最终达到的效果为：当我们点击头部选项栏，中间内容模块会显示对应的图片，其余的图片则会隐藏(排他思想）。

需要注意的点：1、我们一开始是将中间内容模块隐藏，此时需要在中间内容模块中添加一个展示类，使得中间模块在默认状态下内容不为空。2、由于我们采用了document.querySelectorAll()来获取元素，因此获取到的头部选项栏和中间内容模块的所有元素，类型是下标为0开始的列表，由此来实现一一对应匹配。

代码示例：

<!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>tab栏切换</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            .box {
                width: 600px;
                margin: 100px auto;
            }
            
            .box-top {
                overflow: hidden;
                width: 400px;
                background-color: whitesmoke;
            }
            
            .box-top ul li {
                float: left;
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                
            }
            
            .tab li.active {
                background-color: #ccc;
                color:peru;
            }
            
            .box-middle {
                margin-top: 0;
            }
            
            .box-middle .item {
                display: none;
                float: left;
            }

            .box-middle .item.active {
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="box-top">
                <ul class="tab">
                    <li class="tab-item active">第一张</li>
                    <li class="tab-item">第二张</li>
                    <li class="tab-item">第三张</li>
                    <li class="tab-item">第四张</li>
                </ul>
            </div>

            <div class="box-middle">
                <div class="item active"> //默认展示页面
                   <a href="###"><img src="./image/1.jpg" alt=""></a>
                </div>
                <div class="item">
                    <a href="###"><img src="./image/2.jpg" alt=""></a>
                </div>
                <div class="item">
                    <a href="###"><img src="./image/3.jpg" alt=""></a>
                </div>
                <div class="item">
                    <a href="###"><img src="./image/4.jpg" alt=""></a>
                </div>
            </div>   
        </div>

        <script>  
             // 1、获取相应的元素
               let list = document.querySelectorAll('.tab .tab-item')
               let items = document.querySelectorAll('.box-middle .item')
               // 2、用for循环为tab栏所有元素添加点击事件 头部tab栏切换模块(排他思想)
               for (let i = 0; i < list.length; i++){
                     list[i].addEventListener('click',function(){
                        document.querySelector('.tab .active').classList.remove('active')
                        this.classList.add('active')
                // 3、底部显示隐藏模块 要放在点击事件的里边
                        // 3.1、先移除
                     document.querySelector('.box-middle .active').classList.remove('active')
                       // 3.2 点击哪个按钮就显示对应的底部模块
                       items[i].classList.add('active')  // 中间模块展示图片和上面的选项栏一一对应
                     })
               }
        </script>
    </body>
</html>