W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 选项卡



London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.


选项卡 (Tabulators)

Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.

只需创建一些具有相同类名的元素:

Example

<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

然后添加可点击的按钮用于打开内容(单个按钮,导航栏,侧边导航等等...):

Example

<ul class="w3-navbar">
  <li><a href="#" onclick="openCity('London')">London</a></li>
  <li><a href="#" onclick="openCity('Paris')">Paris</a></li>
  <li><a href="#" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>

并添加 JavaScript 用于选择元素:

Example

openCity("London");

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并将特定颜色类添加到当前选项卡链接。 在下面的例子中,我们为每个链接添加了一个 "tablink" 类。 这样,很容易获得与选项卡相关联的所有链接,并将当前选项卡链接添加 "w3-red" 类,以突出显示它:

Example

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";
}
尝试一下 »


垂直选项卡

Example

<nav class="w3-sidenav w3-light-grey" style="width:130px">
  <a href="#" class="tablink" onclick="openCity(event, 'London')">London</a>
  <a href="#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a>
  <a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</nav>
尝试一下 »

带有动画的选项卡内容

使用 w3-animate-classes 来淡出,放大或滑动选项卡内容:

Example

<div id="London" class="w3-container city w3-animate-left">
  <p>London is the capital city of England.</p>
</div>
尝试一下 »

带有选项卡功能的图像库


Nature ×
Nature
Fjords ×
Fjords
Mountains ×
Mountains
Lights ×
Northern Lights

Example

<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">x</span>
  <div class="w3-display-bottomleft w3-container">Nature</div>
</div>
尝试一下 »

网格中的选项卡

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

Example

尝试一下 »