W3.CSS Navigation Tabs (导航栏标签)

2020-12-01 13:49 更新

标签式导航

标签式导航是一种在网站上导航的方法。

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

本示例使用具有相同类名的元素(在本示例中为“ 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 类淡入,缩放或滑动选项卡内容:

实例

<div id="London" class="w3-container city w3-animate-left">
  <p>伦敦是英国的首都。</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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

网格中的标签

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

实例

<script>

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-border-red", "");

  }

  document.getElementById(cityName).style.display = "block";

  evt.currentTarget.firstElementChild.className += " w3-border-red";

}

</script>


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号