W3.CSS 导航选项卡
伦敦
伦敦是英国的首都。
它是英国人口最多的城市，大都市区有超过 900 万居民。
巴黎
巴黎是法国的首都。
巴黎地区是欧洲最大的人口中心之一，拥有超过 1200 万居民。
东京
东京是日本的首都。
它是大东京地区的中心，也是世界上人口最多的都市区。
标签式导航
选项卡式导航是一种在网站中导航的方式。
通常，选项卡式导航使用导航按钮（选项卡）排列在一起，并突出显示所选选项卡。
此示例使用具有相同类名的元素（在我们的示例中为 "city"），并在 display:none 和 display:block 之间更改样式以隐藏和显示不同的样式 内容:
实例
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
of England.</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
和一些可点击的按钮来打开选项卡内容:
实例
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button"
onclick="openCity('London')">London</button>
<button
class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">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 is the capital city of England.
要关闭选项卡，请将
要关闭选项卡，请将 aa 添加到选项卡容器内的元素 添加到选项卡容器内的元素:
实例
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
亲自试一试 »
活动/当前选项卡
To highlight the current tab/page the user is on, use JavaScript and add a color class to the active link. In the example below, we have added a "tablink" class to each link. That way, it is easy to get all links that is associated with tabs, and give the current tab link a "w3-red" class, to highlight it:
实例
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')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</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>
亲自试一试 »
网格中的选项卡
在第三列布局中使用选项卡。 请注意，我们为活动选项卡添加了底部边框，而不是背景颜色:
