W3.CSS 導航選項卡
London
倫敦是英格蘭的首都。
它是英國人口最多的城市，都會區超過 900 萬居民。
巴黎
巴黎是法國的首都。
巴黎地區是歐洲最大的聚居地之一，人口超過 1200 萬。
東京
東京是日本的首都。
它是大東京地區的核心，也是世界上人口最多的都會區。
選項卡式導航
選項卡式導航是一種在網站中導航的方式。
通常，選項卡式導航使用導航按鈕（選項卡）排列在一起，並突出顯示選定的選項卡。
此示例使用具有相同類名（在我們的示例中為“city”）的元素，並更改 display:none 和 display:block 之間的樣式以隱藏和顯示不同的內容
示例
<div id="London" class="city">
<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>
以及一些可點選的按鈕來開啟選項卡內容
示例
<div class="w3-bar w3-black">
<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
示例
function openCity(cityName) {
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"）；
可關閉選項卡
London
倫敦是英格蘭的首都。
要關閉選項卡，請將 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”類。這樣，就可以輕鬆獲取與選項卡關聯的所有連結，併為當前選項卡連結指定“w3-red”類，以突出顯示它
示例
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-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-red";
}
自己試試 »
垂直標籤頁
示例
<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
<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-類 來淡入、縮放或滑動選項卡內容
選項卡式圖片庫
點選圖片
自然
法國阿爾卑斯山
山脈
北極光
示例
<a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="自然">
</a>
<div id="Nature" class="picture w3-display-container">
<img src="img_nature_wide.jpg" alt="自然" style="width:100%">
<span onclick="this.parentElement.style.display='none'" class="w3-display-topright">×</span>
<div class="w3-display-bottomleft w3-container">自然</div>
</div>
自己試試 »
網格中的選項卡
在第三列布局中使用選項卡。請注意，我們為活動選項卡添加了下邊框，而不是背景顏色
