W3.CSS 导航选项卡

伦敦巴黎东京

伦敦

伦敦是英格兰的首都。

它是英国人口最多的城市，大都市区人口超过 900 万。

巴黎

巴黎是法国的首都。

巴黎地区是欧洲最大的人口中心之一，拥有超过 1200 万居民。

东京

东京是日本的首都。

它是大东京地区的中心，也是世界上人口最多的都市区。

选项卡式导航

选项卡式导航是一种在网站上导航的方式。

通常，选项卡式导航使用与突出显示的所选选项卡一起排列的导航按钮（选项卡）。

此示例使用具有相同类名的元素（在我们的示例中为"city"），并更改之间的样式显示：无和显示：块隐藏和显示不同的内容：

示例

<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 解释

这个开放城市()当用户单击菜单中的按钮之一时，将调用该函数。

该函数隐藏类名"city" (显示="none"），并显示具有给定城市名称的元素（显示="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>London</h2>
<p>London is the capital city of England.</p>
</div>

亲自试一试»

活动/当前选项卡

要突出显示用户当前所在的选项卡/页面，请使用 JavaScript 并向活动链接添加颜色类。在下面的示例中，我们向每个链接添加了"tablink" 类。这样，就可以轻松获取与选项卡关联的所有链接，并为当前选项卡链接指定 "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>

亲自试一试»

网格中的选项卡

在第三列布局中使用选项卡。请注意，我们向活动选项卡添加底部边框，而不是背景颜色：

示例

亲自试一试»