倫敦
倫敦是英國的首都城市。
它是英國人口最多的城市，擁有超過13萬居民的大都市區。
巴黎
巴黎是法國的首都。
巴黎地區是歐洲人口最多的中心，擁有超過12萬居民中的一個。
東京
東京是日本的首都。
這是大東京地區的中心，是世界上人口最多的大都市區。
標籤（製表）
標籤是完美的單頁Web應用程序，或網頁能夠顯示不同的科目。
剛剛創建具有相同的類名的許多元素：
例
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
city of England.</p>
</div>
<div id="Paris" class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
再加入一些可點擊的按鈕，打開內容（單按鈕，導航欄，sidenav等）：
例
<ul class="w3-navbar">
<li><a href="#" onclick="openCity('London')">London</a></li>
<li><a href="#" onclick="openCity('Paris')">Paris</a></li>
<li><a href="#" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>並添加JavaScript來選擇元素：
例
openCity("London");
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（）打開“倫敦”（ID =“倫敦）。
然後，當用戶點擊菜單中的一個按鈕調用open城（）用不同的城市名稱（ID =“巴黎）。
該openCity（）函數隱藏的類名為“城市”的元素（ 顯示=“無”），並顯示給定城市ID的元素（ 顯示器=“塊”）。
主動/當前標籤
如果你想突出當前標籤/頁的用戶，請使用JavaScript和添加特定的顏色類當前選項卡的鏈接。 在下面的例子中，我們增加了一個“tablink”類的每一個環節。 這樣一來，很容易獲取與標籤相關聯的所有鏈接，並給當前選項卡鏈接“W3紅”級，將其高亮顯示：
例
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-sidenav w3-light-grey" style="width:130px">
<a href="#" class="tablink" onclick="openCity(event, 'London')">London</a>
<a href="#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a>
<a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</nav>
試一試» 動畫選項卡內容
使用任何W3-animate- 類褪色，在選項卡內容縮放或幻燈片：
例
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</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> 試一試» 在網格選項卡
在第三列佈局使用標籤。 需要注意的是，我們的底邊框添加，而不是背景色有源標籤，：