CSS实现导航条Tab切换的三种方法介绍

标题：CSS实现导航条Tab切换的三种方法介绍

导航条在网页设计中极为常见，Tab切换效果也是常用的交互方式，本文将介绍实现导航条Tab切换的三种方法。

一、利用CSS的:target伪类实现

在导航条和内容区块中，给每个Tab添加一个锚点，如下所示：

<ul>
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>

<div id="tab1">
  <p>Tab 1 Content</p>
</div>
<div id="tab2">
  <p>Tab 2 Content</p>
</div>
<div id="tab3">
  <p>Tab 3 Content</p>
</div>

然后，利用CSS的:target伪类来实现Tab切换效果，如下所示：

div {
  display: none;
}

div:target {
  display: block;
}

这段CSS代码的作用是：首先将所有的内容区块隐藏，然后当锚点被点击时，对应的内容区块显示出来。

二、利用CSS的checkbox实现

在导航条中使用checkbox，当checkbox被选中时，对应的内容区块显示出来，代码如下所示：

<ul>
  <li>
    <label for="tab1">Tab 1</label>
    <input type="checkbox" id="tab1">
    <div>Tab 1 Content</div>
  </li>
  <li>
    <label for="tab2">Tab 2</label>
    <input type="checkbox" id="tab2">
    <div>Tab 2 Content</div>
  </li>
  <li>
    <label for="tab3">Tab 3</label>
    <input type="checkbox" id="tab3">
    <div>Tab 3 Content</div>
  </li>
</ul>

对应的CSS代码如下所示：

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + div {
  display: block;
}

这段CSS代码的作用是：首先将所有的内容区块隐藏，然后当checkbox被选中时，对应的内容区块显示出来。

三、利用CSS的animation实现

利用CSS3新增的animation属性，结合标签自身的状态，可以实现Tab切换效果，代码如下所示：

<ul>
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>

<div id="tab1">
  <p>Tab 1 Content</p>
</div>
<div id="tab2">
  <p>Tab 2 Content</p>
</div>
<div id="tab3">
  <p>Tab 3 Content</p>
</div>

对应的CSS代码如下所示：

div[id^="tab"] {
  display: none;
}

div[id^="tab"]:target {
  display: block;
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

这段CSS代码的作用是：首先将所有的内容区块隐藏，然后当锚点被点击时，对应的内容区块显示出来，并实现淡入的效果。

示例：

查看本文示例：CSS实现导航条Tab切换的三种方法介绍