位置：首页-资讯-后端开发

JS如何实现简单Tab栏切换

2023-06-29 10:19

短信预约 -IT技能 免费直播动态提醒

这篇文章主要为大家展示了“JS如何实现简单Tab栏切换”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何实现简单Tab栏切换”这篇文章吧。

具体内容如下

要求：当鼠标点击上面相应的选项卡（tab），下面页面的内容也随之而改变。

结构分析：

全部的内容都放到一个大的盒子里面，盒子里面又可以分为上面和下面两个盒子。

上面的盒子放了 5个li，装着5个小的选项卡，默认会有一个被选中；

下面的盒子也包含了 5个 div 模块，模块内容与上面的选项一一对应，当前默认的只有第一个 div会被显示出来。

实现思路：

点击切换选项卡部分

JS如何实现简单Tab栏切换

Tab 栏切换有2个大的模块

上面模块的选项卡，点击某一个，改变当前样式，底色变为红色，字体颜色变为白色。而其他的选项卡样式不发生改变（排他思想）

通过修改类名的方式实现。

下面模块的内容，会随着上面的选项卡变化。所以下面模块变化写到点击事件里面。

规律：下面的模块显示的内容和上面选项卡一一对应，相匹配。

核心思路：给上面模块里面所有的 li 添加自定义属性，属性值从 0 开始作为索引号。

排他思想：通过 for循环遍历数组中的元素，进入循环之后首先消除所有部分的样式，接着再为所点击的当前部分添加样式。

通过 setAttribute（name，value）创建自定义属性，name指的是为元素设置的自定义属性，value为自定义属性添加的属性值。

通过 getAttribute（name）获取元素的属性。name是属性的名称。

默认第一个选项卡对应的下面模块是显示的，需要在添加行内样式（style='display:block'）因为CSS行内样式的优先级高于外部样式，会优先显示。

而（items[index].style.display = 'block';）这一句也相当于创建了行内样式。

实现代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Tab栏切换</title>    <style>    *{        margin:0;        padding:0;    }    .tab{        width:800px;        height:45px;        border:1px solid #ccc;        border-bottom:1px solid #c81623;        background: #fafafa;        position:relative;        margin:100px auto;    }    .tab_list li{        width:160px;        height:45px;        list-style:none;        line-height:45px;        text-align: center;        float:left;    }    .tab_list .current{        background-color:#c81623;        color:#fff;    }    .item{        width:800px;        height: 200px;        padding-top:40px;                 font-size: 30px;        color:#fff;        text-align: center;        text-shadow:2px 2px 4px #000000;        background: #efefef;                top:47px;        position:absolute;    }    </style></head><body><div class='tab'>        <div class='tab_list'>            <ul>                <li class='current'>个性推荐</li>                <li>歌单</li>                <li>主播电台</li>                <li>排行榜</li>                <li>歌手</li>            </ul>        </div>    <div class='tab_con'>        <div class="item one" style='display:block'>每日歌曲推荐</div>        <div class="item two">精品歌单倾心推荐，给最懂音乐的你</div>        <div class="item thr">上瘾烟嗓情感之声</div>        <div class="item fou">新歌飙升榜</div>        <div class="item fiv">歌手排行榜</div>    </div></div><!--  tab 栏切换有2个模块 模块的选项卡，点击其中的某一个，被点击的这一个底色将变成红色的，其余的不变（排他思想）使用修改类的名称的方式。 --><!--  下面显示模块内容，会随着上面的选项卡变化，所以下面模块变化写到点击事件里面。 规律：下面模块显示内容和上面的选项卡一一对应，相匹配。  --> <script>     var tab_list = document.querySelector('.tab_list');     var lis = tab_list.querySelectorAll('li');     var items = document.querySelectorAll('.item');     //for 循环绑定点击事件     for(var i=0;i < lis.length;i++){         lis[i].setAttribute('index',i);        lis[i].onclick = function() {            //             for(var i=0;i < lis.length;i++){                 lis[i].className = '';             }             //留下现在需要用的             this.className = 'current';             //下面显示内容模块             var index = this.getAttribute('index');             console.log(index);             //去掉其他的 item，让这些隐藏起来             //只留下当前的 item，让它显示出来             for(var i=0;i<items.length;i++){                 items[i].style.display='none';             }             items[index].style.display = 'block';         }     } </script></body></html>

实现效果：

JS如何实现简单Tab栏切换