溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹JavaScript如何實(shí)現(xiàn)tab欄切換的效果，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
tab欄：點(diǎn)擊不同的標(biāo)簽，顯示不同的內(nèi)容，被點(diǎn)擊的標(biāo)簽樣式發(fā)生改變（突出選中的是哪一個）
1、將tab欄分為上下兩部分，上面是導(dǎo)航列表，下面是各部分對應(yīng)的內(nèi)容。把標(biāo)簽和內(nèi)容都寫出來，內(nèi)容按照標(biāo)簽順序依次順著寫，給標(biāo)簽都添加自定義屬性- - -index，屬性值從0開始，依次增加1
2、首先實(shí)現(xiàn)上面的效果，點(diǎn)擊后樣式切換，被點(diǎn)擊的字體顏色、背景顏色改變等:
①css定義一個類eg：current，里面定義改變后的樣式，先給第一個標(biāo)簽寫一個該類名，其他的不寫類名，
②js獲取所有標(biāo)簽元素對象，- - -for循環(huán)- - -遍歷給每個標(biāo)簽綁定- - -onclick點(diǎn)擊事件
③點(diǎn)擊事件里面使用排他算法- - -for循環(huán)- - -將所有標(biāo)簽設(shè)置類名為空- - -className = ‘' ，然后當(dāng)前被點(diǎn)擊的標(biāo)簽設(shè)置上面定義的特殊類名- - -this.className = ‘current';
3、實(shí)現(xiàn)下面，根據(jù)點(diǎn)擊的標(biāo)簽，出現(xiàn)不同的內(nèi)容：
①css將第一個標(biāo)簽對應(yīng)內(nèi)容顯示，其他的都隱藏起來：
.box-tb .item:nth-child(n+2) {
display: none;
}②獲取內(nèi)容的全部元素對象，獲取標(biāo)簽的index值，在點(diǎn)擊事件里再添加一個排他思想代碼- - -for循環(huán)- - -遍歷內(nèi)容的元素對象，將所有內(nèi)容設(shè)置隱藏- - -items[i].style.display = ‘none';然后根據(jù)被點(diǎn)擊的標(biāo)簽，將對應(yīng)的內(nèi)容顯示- - -items[index].style.display = ‘block';
<!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-th {
overflow: hidden;
width: 100%;
background-color: #88ace6;
}
.box-th ul li {
float: left;
width: 90px;
height: 20px;
margin-right: 10px;
padding: 5px;
text-align: center;
}
.current {
color: #fff;
background-color: green;
}
.box-tb {
margin-top: 20px;
}
.box-tb .item:nth-child(n+2) {
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="box-th">
<ul>
<li data-index="0" class="current">春</li>
<li data-index="1">夏</li>
<li data-index="2">秋</li>
<li data-index="3">冬</li>
</ul>
</div>
<div class="box-tb">
<div class="item">春季排四季之首，新的輪回從此開啟。春，代表著溫暖、生長，植物發(fā)芽，風(fēng)和日暖，鳥語花香。這季節(jié)的氣溫、日照、降雨，處于一年中的轉(zhuǎn)折點(diǎn)，趨于上升或增多。春季，陰陽之氣開始轉(zhuǎn)變，萬物隨陽氣上升而萌牙生長，春季是萬物生長、春耕播種的季節(jié)，所謂“一年之計在于春”。 春季起始—結(jié)束： 依據(jù)天象變化劃分：傳統(tǒng)上是以“立春”（斗指寅，太陽達(dá)黃經(jīng)315°時）作為春季的起點(diǎn)，至“立夏”結(jié)束。 依據(jù)氣溫變化劃分：近代采用學(xué)者張寶堃的“候平均氣溫”劃分，以候平均溫度(連續(xù)5天氣溫的平均)從10℃以下穩(wěn)定升到10℃以上時作為春季開始，至候平均溫度22℃以上（入夏）時結(jié)束。
</div>
<div class="item">夏季萬物至此皆盛，是農(nóng)作物進(jìn)入旺季生長的一個季節(jié)。溫度升高，天氣炎熱，狂風(fēng)暴雨頻發(fā)，萬物盛長。夏季是風(fēng)暴最多的季節(jié)，常伴隨著大風(fēng)、暴雨。北半球夏季，大陸受熱氣壓上升形成低氣壓，海洋恒溫溫度相對較低形成高氣壓，根據(jù)環(huán)流，夏季吹的是東南風(fēng)。夏季北半球各地的白晝時間全年最長。 夏季起始—結(jié)束： 依據(jù)天象變化劃分：以“立夏”（斗指東南，太陽達(dá)黃經(jīng)45°）作為夏季的起點(diǎn)，至“立秋”結(jié)束。 依據(jù)氣溫變化劃分：以候平均溫度穩(wěn)定升到22℃以上時作為夏季開始，至候平均溫度22℃以下時結(jié)束。
</div>
<div class="item">秋季是收獲季節(jié)，意味著萬物開始從繁茂成長趨向蕭索成熟。秋季的前兩個節(jié)氣立秋、處暑，還是酷熱天氣，因太陽所帶來的熱力未減弱，所謂“熱在三伏”，三伏天出現(xiàn)在小暑與處暑之間，是一年中氣溫最高且又潮濕、悶熱的日子。造成三伏天濕度高原因是，三伏天吹東南風(fēng)，而東南方是太平洋和印度洋，空氣潮濕，風(fēng)的潮濕造成了三伏天濕度大；到了深秋之后則相反，吹西北風(fēng)，而西北方是干燥的內(nèi)陸，干燥的西北風(fēng)造成深秋之后氣候干燥。秋季前兩個節(jié)氣的氣候特征為潮濕、悶熱，秋季真正涼爽一般要到白露節(jié)氣之后，自白露起漸漸趨向涼爽、干燥。隨著進(jìn)入深秋，氣候由熱轉(zhuǎn)涼，萬物隨寒氣增長，逐漸蕭落，這是熱與冷交替的季節(jié)。秋季最明顯的變化草木的葉子從繁茂的綠色到發(fā)黃，并開始落葉莊稼則開始成熟。
[1] 秋季起始—結(jié)束： 依據(jù)天象變化劃分：以“立秋”（斗指西南，太陽達(dá)黃經(jīng)135°）作為秋季的起點(diǎn)，至“立冬”結(jié)束。 依據(jù)氣溫變化劃分：以候平均溫度從22℃以上穩(wěn)定降到22℃以下作為秋季開始，至候平均溫度降到10℃以下時結(jié)束。
</div>
<div class="item">冬季，陰陽轉(zhuǎn)變，萬物由收到藏，植物生氣閉蓄。進(jìn)入立冬后意味著秋季少雨干燥氣候漸過去，轉(zhuǎn)為陰雨寒凍的冬季氣候特征。北半球的太陽高度小，白晝時間短。所謂“熱在三伏”，冷在三九”，冬至為"一九天"，冬至之前還不算很冷，冬至過后強(qiáng)冷空氣南下頻繁，并越過了南嶺，氣溫驟降，天氣寒冷。冬季真正寒冷，是在冬至后。 冬季起始—結(jié)束： 依據(jù)天象變化劃分：以“立冬”（斗指西北，太陽達(dá)黃經(jīng)225°）作為冬季的起點(diǎn)，至下一“立春”結(jié)束。 依據(jù)氣溫變化劃分：以候平均溫度穩(wěn)定降到10℃以下為冬季的開始，至候平均溫度10℃以上時結(jié)束。
</div>
</div>
</div>
<script>
var list = document.querySelector('.box-th').querySelectorAll('li');
var items = document.querySelector('.box-tb').querySelectorAll('.item');
for (var i = 0; i < list.length; i++) {
list[i].onclick = function() {
// 導(dǎo)航欄樣式切換，排他算法
for (var i = 0; i < list.length; i++) {
list[i].className = '';
}
this.className = 'current';
// 下面展示內(nèi)容切換，排他算法
var index = this.getAttribute('data-index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>頁面效果：
關(guān)于JavaScript如何實(shí)現(xiàn)tab欄切換的效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼