W3.CSS 导航选项卡
伦敦
伦敦是英格兰的首都。
它是英国人口最多的城市，大都市区拥有超过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"**）；
可关闭的选项卡
伦敦
伦敦是英格兰的首都。
要关闭选项卡，请将 **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-classes 来淡入、缩放或滑入选项卡内容
选项卡图片库
点击图片
自然
法国阿尔卑斯山
山脉
北极光
示例
<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">自然</div>
</div>
亲自尝试 »
网格中的选项卡
在三列布局中使用选项卡。请注意，我们为活动选项卡添加了底部边框，而不是背景颜色
