HTML實(shí)現(xiàn)導(dǎo)航標(biāo)簽切換

在網(wǎng)頁導(dǎo)航中，常常需要切換顯示不同內(nèi)容，這個功能可以通過HTML、CSS、Javascript來實(shí)現(xiàn)。本文將介紹如何通過HTML和CSS實(shí)現(xiàn)導(dǎo)航標(biāo)簽切換。

首先，在HTML中定義導(dǎo)航標(biāo)簽的結(jié)構(gòu)。

<div>
<a href="#" class="active" onclick="showContent(1)">標(biāo)簽1</a>
<a href="#" onclick="showContent(2)">標(biāo)簽2</a>
<a href="#" onclick="showContent(3)">標(biāo)簽3</a>
</div>
<div id="content1">
這是標(biāo)簽1的內(nèi)容。
</div>
<div id="content2" class="hidden">
這是標(biāo)簽2的內(nèi)容。
</div>
<div id="content3" class="hidden">
這是標(biāo)簽3的內(nèi)容。
</div>

然后，在CSS中設(shè)置標(biāo)簽的樣式，并隱藏除第一個標(biāo)簽以外的內(nèi)容。

div {
display: inline-block;
}
a {
display: inline-block;
padding: 10px;
margin: 10px;
background-color: #eee;
color: #333;
text-decoration: none;
}
#content1 {
display: block;
}
.hidden {
display: none;
}

最后，在Javascript中定義showContent函數(shù)，用于顯示選擇的標(biāo)簽內(nèi)容。

function showContent(index) {
var contents = document.querySelectorAll('[id^="content"]');
for (var i = 0; i < contents.length; i++) {
contents[i].classList.add('hidden');
}
document.getElementById('content' + index).classList.remove('hidden');
var links = document.querySelectorAll('a');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove('active');
}
document.querySelector('a[onclick="showContent(' + index + ')"]').classList.add('active');
}

完成上述步驟后，即可實(shí)現(xiàn)導(dǎo)航標(biāo)簽的切換效果。