伦敦
伦敦是英国的首都城市。
它是英国人口最多的城市，拥有超过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> 试一试» 在网格选项卡
在第三列布局使用标签。 需要注意的是，我们的底边框添加，而不是背景色有源标签，：