溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JS如何實現簡單Tab欄切換”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JS如何實現簡單Tab欄切換”這篇文章吧。
具體內容如下
要求：當鼠標點擊上面相應的選項卡（tab），下面頁面的內容也隨之而改變。
結構分析：
全部的內容都放到一個大的盒子里面，盒子里面又可以分為上面和下面兩個盒子。
上面的盒子放了 5個li，裝著5個小的選項卡，默認會有一個被選中；
下面的盒子也包含了 5個 div 模塊，模塊內容與上面的選項一一對應，當前默認的只有第一個 div會被顯示出來。
點擊切換選項卡部分
Tab 欄切換有2個大的 模塊
1、上面模塊的選項卡，點擊某一個，改變當前樣式，底色變為紅色，字體顏色變為白色。而其他的選項卡樣式不發生改變（排他思想）
通過修改類名的方式實現。
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;
/*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個模塊
模塊的選項卡，點擊其中的某一個，被點擊的這一個底色將變成紅色的，其余的不變（排他思想）使用修改類的名稱的方式。 -->
<!-- 下面顯示模塊內容，會隨著上面的選項卡變化，所以下面模塊變化寫到點擊事件里面。
規律：下面模塊顯示內容和上面的選項卡一一對應，相匹配。
-->
<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欄切換”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
