JS實現(xiàn)簡單Tab欄切換案例

更新時間：2022年03月07日 10:49:52 作者：Cloud%

這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單Tab欄切換案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)簡單Tab欄切換的具體代碼，供大家參考，具體內(nèi)容如下

要求：當鼠標點擊上面相應的選項卡（tab），下面頁面的內(nèi)容也隨之而改變。

結(jié)構(gòu)分析：

全部的內(nèi)容都放到一個大的盒子里面，盒子里面又可以分為上面和下面兩個盒子。

上面的盒子放了 5個li，裝著5個小的選項卡，默認會有一個被選中；

下面的盒子也包含了 5個 div 模塊，模塊內(nèi)容與上面的選項一一對應，當前默認的只有第一個 div會被顯示出來。

實現(xiàn)思路：

點擊切換選項卡部分

Tab 欄切換有2個大的模塊

1、上面模塊的選項卡，點擊某一個，改變當前樣式，底色變?yōu)榧t色，字體顏色變?yōu)榘咨６渌倪x項卡樣式不發(fā)生改變（排他思想）

通過修改類名的方式實現(xiàn)。

2、下面模塊的內(nèi)容，會隨著上面的選項卡變化。所以下面模塊變化寫到點擊事件里面。

規(guī)律：下面的模塊顯示的內(nèi)容和上面選項卡一一對應，相匹配。

核心思路：給上面模塊里面所有的 li 添加自定義屬性，屬性值從 0 開始作為索引號。

排他思想：通過 for循環(huán)遍歷數(shù)組中的元素，進入循環(huán)之后首先消除所有部分的樣式，接著再為所點擊的當前部分添加樣式。

通過 setAttribute（name，value）創(chuàng)建自定義屬性，name指的是為元素設置的自定義屬性，value為自定義屬性添加的屬性值。

通過 getAttribute（name）獲取元素的屬性。name是屬性的名稱。

默認第一個選項卡對應的下面模塊是顯示的，需要在添加行內(nèi)樣式（style='display:block'）因為CSS行內(nèi)樣式的優(yōu)先級高于外部樣式，會優(yōu)先顯示。

而（items[index].style.display = 'block';）這一句也相當于創(chuàng)建了行內(nèi)樣式。

實現(xiàn)代碼：

<!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;?
? ? ? ? /*line-height:200px;*/
? ? ? ? font-size: 30px;
? ? ? ? color:#fff;
? ? ? ? text-align: center;
? ? ? ? text-shadow:2px 2px 4px #000000;
? ? ? ? background: #efefef;
? ? ? ? /*opacity: 0.8;*/
? ? ? ? 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個模塊
?模塊的選項卡，點擊其中的某一個，被點擊的這一個底色將變成紅色的，其余的不變（排他思想）使用修改類的名稱的方式。 -->
<!-- ?下面顯示模塊內(nèi)容，會隨著上面的選項卡變化，所以下面模塊變化寫到點擊事件里面。
?規(guī)律：下面模塊顯示內(nèi)容和上面的選項卡一一對應，相匹配。
? -->

?<script>
? ? ?var tab_list = document.querySelector('.tab_list');
? ? ?var lis = tab_list.querySelectorAll('li');
? ? ?var items = document.querySelectorAll('.item');
? ? ?//for 循環(huán)綁定點擊事件
? ? ?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 = '';
? ? ? ? ? ? ?}
? ? ? ? ? ? ?//留下現(xiàn)在需要用的
? ? ? ? ? ? ?this.className = 'current';
? ? ? ? ? ? ?//下面顯示內(nèi)容模塊
? ? ? ? ? ? ?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>

實現(xiàn)效果：