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>
自己试试 »
网格中的选项卡
在第三列布局中使用选项卡。请注意，我们为活动选项卡添加了下边框，而不是背景颜色
