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”类。这样，很容易获得与选项卡关联的所有链接，并为当前选项卡链接提供“ 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>
尝试一下 »
点击“尝试一下”按钮查看在线实例