免費AI編程助手
W3.CSS Navigation Tabs (導(dǎo)航欄標(biāo)簽)
標(biāo)簽式導(dǎo)航
標(biāo)簽式導(dǎo)航是一種在網(wǎng)站上導(dǎo)航的方法。
通常，選項卡式導(dǎo)航使用與突出顯示的所選選項卡一起排列的導(dǎo)航按鈕（選項卡）。
本示例使用具有相同類名的元素（在本示例中為“ city”），并在 display：none和 display：block 之間更改樣式以隱藏和顯示不同的內(nèi)容：
示例
<h2>倫敦</h2>
<p>倫敦是英國的首都。</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>巴黎</h2>
<p>巴黎是法國的首都。</p>
</div>
<div id="Tokyo" class="city" style="display:none">
<h2>東京</h2>
<p>東京是日本的首都。</p>
</div>
還有一些可點擊的按鈕來打開選項卡式內(nèi)容：
示例
<button class="w3-bar-item w3-button" onclick="openCity('London')">倫敦</button>
<button class="w3-bar-item w3-button" onclick="openCity('Paris')">巴黎</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">東京</button>
</div>
用JavaScript來完成這項工作：
實例
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
JavaScript解釋了
所述openCity（）函數(shù)被調(diào)用時在菜單按鈕中的一個的用戶點擊。
該函數(shù)隱藏所有具有類名“ city”（display =“ none”）的元素，并顯示具有給定城市名（display =“ block”）的元素；
可關(guān)閉的標(biāo)簽
要關(guān)閉標(biāo)簽，請 在標(biāo)簽容器內(nèi)的元素上添加onclick =“ this.parentElement.style.display ='none'”：
實例
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>倫敦</h2>
<p>倫敦是英國的首都。</p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
活動/當(dāng)前選項卡
要突出顯示用戶當(dāng)前所在的標(biāo)簽/頁面，請使用JavaScript并將顏色類別添加到活動鏈接。在下面的示例中，我們向每個鏈接添加了一個“ tablink”類。這樣，很容易獲得與選項卡關(guān)聯(lián)的所有鏈接，并為當(dāng)前選項卡鏈接提供“ w3-red”類，以突出顯示它：
實例
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-red";
}
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
垂直制表符
實例
<button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">倫敦</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">巴黎</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">東京</button>
</nav>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
動畫標(biāo)簽內(nèi)容
使用任何 w3-animate 類淡入，縮放或滑動選項卡內(nèi)容：
實例
<p>倫敦是英國的首都。</p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
標(biāo)簽式圖庫
實例
<a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture w3-display-container">
<img src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'" class="w3-display-topright">×</span>
<div class="w3-display-bottomleft w3-container">Nature</div>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
網(wǎng)格中的標(biāo)簽
在第三列布局中使用選項卡。請注意，我們在活動選項卡上添加了底邊框，而不是背景色：
實例
<script>
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-border-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.firstElementChild.className += " w3-border-red";
}
</script>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
更多建議：