這篇文章主要介紹JavaScript實現tab欄切換效果的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體內容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- css樣式 -->
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
margin: 100px 500px;
border: 1px solid #999;
}
li {
list-style: none;
}
.tab_top {
width: 600px;
height: 50px;
background-color: #ccc;
}
.tab_top li {
float: left;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
padding: 0 20px;
}
.current {
background-color: red;
color: #fff;
}
.tab_con {
width: 600px;
height: 300px;
background-color: #fff;
}
先在css里面設置下面小div全部隱藏
.item {
display: none
}
</style>
<!-- html結構 -->
<body>
<div class="box">
<div class="tab_top">
<ul>
<li class="current">標題一</li>
<li>標題二</li>
<li>標題三</li>
<li>標題四</li>
<li>標題五</li>
</ul>
</div>
<div class="tab_con">
<div class="item" > --->此處默認第一個顯示
我是內容一<br>
我是內容一<br>
我是內容一<br>
我是內容一<br>
我是內容一<br>
</div>
<div class="item">
我是內容二<br>
我是內容二<br>
我是內容二<br>
我是內容二<br>
我是內容二<br>
</div>
<div class="item">
我是內容三<br>
我是內容三<br>
我是內容三<br>
我是內容三<br>
我是內容三<br>
</div>
<div class="item">
我是內容四<br>
我是內容四<br>
我是內容四<br>
我是內容四<br>
我是內容四<br>
</div>
<div class="item">
我是內容五<br>
我是內容五<br>
我是內容五<br>
我是內容五<br>
我是內容五<br>
我是內容五<br>
</div>
</div>
</div>
</body>js:
<script>
//1 上的選項卡 點擊某一個 當前這一個底色是紅色 其余不變 （排他思想） 修改類名的方法
//獲取元素
//01 獲取上半部分盒子
var tab_top = document.querySelector('.tab_top');
//02 獲取上班部分 所有小li 得到一個數組
var lis = tab_top.querySelectorAll('li');
//03 獲取下半部分 所有小div盒子 得到一個數組
var item = document.querySelectorAll('.item')
//for 循環所有小li 綁定點擊事件
for (var i = 0; i < lis.length; i++) {
//開始給上面li設置索引號 屬性index 值 i
lis[i].setAttribute('index', i);
// 注冊點擊事件
lis[i].onclick = function () {
// 來個排他思想
for (var j = 0; j < lis.length; j++) {
//先讓所有的li 點擊沒有樣式
lis[j].className = '';
}
// 誰點擊 誰加樣式
this.className = 'current'
//2 下面顯示內容模塊也要寫在onclick里面 因為一一對應
// 給上面top 所有li 添加index 索引號 屬性從0開始 自定義屬性
// 上面已經設置好 現在拿來用
var index = this.getAttribute('index');
// 點擊上面li 對應下面div顯示出來
//再來排他思想 先干掉其他人 讓隱藏 點誰 誰顯示
for (var k = 0; k < item.length; k++) {
//所有的小div 隱藏
item[k].style.display = 'none'
}
//點擊哪個小li 小li的index對應的div 顯示
item[index].style.display = 'block';
}
}
</script>效果圖：
以上是“JavaScript實現tab欄切換效果的方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
