W3.CSS Navigation Tabs (導航欄標簽)
標簽式導航
標簽式導航是一種在網站上導航的方法。
通常，選項卡式導航使用與突出顯示的所選選項卡一起排列的導航按鈕（選項卡）。
本示例使用具有相同類名的元素（在本示例中為“ city”），并在 display：none和 display：block 之間更改樣式以隱藏和顯示不同的內容：
示例
<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>
還有一些可點擊的按鈕來打開選項卡式內容：
示例
<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（）函數被調用時在菜單按鈕中的一個的用戶點擊。
該函數隱藏所有具有類名“ city”（display =“ none”）的元素，并顯示具有給定城市名（display =“ block”）的元素；
可關閉的標簽
要關閉標簽，請 在標簽容器內的元素上添加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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
活動/當前選項卡
要突出顯示用戶當前所在的標簽/頁面，請使用JavaScript并將顏色類別添加到活動鏈接。在下面的示例中，我們向每個鏈接添加了一個“ tablink”類。這樣，很容易獲得與選項卡關聯(lián)的所有鏈接，并為當前選項卡鏈接提供“ 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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
動畫標簽內容
使用任何 w3-animate 類淡入，縮放或滑動選項卡內容：
實例
<p>倫敦是英國的首都。</p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
標簽式圖庫
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
網格中的標簽
在第三列布局中使用選項卡。請注意，我們在活動選項卡上添加了底邊框，而不是背景色：
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
更多建議：