纯CSS实现Tab栏选项卡切换

前言

在 CSS3 之前，如果说完全靠 CSS 能够实现Tab栏选项卡的切换效果，这毫无疑问是不可能的，只能通过 JavaScript 来实现这种效果。但因为强大的CSS3出来了， 提供的选择器的其中一种 可以帮助我们实现这种效果。

虽然能够实现这种效果，但在实际开发中，只有 特殊情况下 才可以使用，这主要取决于项目的整体的布局。实现这种效果，布局显的极为重要，也通过实现这种效果，能够说明你的CSS基础非常扎实。

本文重点在于 HTML的结构以及CSS的布局 。思路有很多种，大致上实现效果即可。

视图

• 概述整体的思路、布局
• 搭建核心的HTML结构
• 完成基本的CSS布局
• 实现最终效果

概述整体的思路、布局

我的HTML结构分为 两部分 ，一个大盒子包裹着上边一个盒子和下边一个盒子，上边的盒子为 Tab栏 ，下边的盒子则展示对应着Tab栏的内容，因为是这样，所以上边盒子里的盒子需与下边盒子里的盒子 相对应 ，且顺序不能乱。

<div class="box"> 
	<div class="top"></div> 
	<div class="bottom"></div>
</div>

布局我采用比较简单普遍的布局： 定位和浮动 。 具体思路 ：先让父盒子为 相对定位 ，然后分别让顶部及底部盒子为 绝对定位 ，顶部盒子为 最上方 ，底部盒子为 最下方 。非常的朴实无华！

除了 布局 ，还需要一些基本的样式：

.box {
  margin: 100px auto;
  position: relative;
  width: 600px;
  height: 500px;
  border: 1px solid;
}

.top {
  width: 100%;
  height: 150px;
  position: absolute;
  top: 0;
}

.bottom {
  width: 100%;
  height: 300px;
  position: absolute;
  bottom: 0;
}

搭建核心的HTML结构

这个效果包含了 锚点定位 的知识，这里也来科普一下吧。

锚点定位 ：通过点击页面上的一个超链接能够在当前页面实现跳转，也就是说，超链接不仅能够打开新的页面，还能够 实现跳转 ， 其作用堪比JavaScript ，而且非常简单。怎么实现的呢？

通过在超链接，也就是a标签，它的 href 属性上设置与其需要跳转的区域的 id 名 与之对应 ，比如说：需要跳转的区域的 id 名为 box ，则与其对应的a标签的 href 属性值为 box ，但又因为CSS选择器通过 # 代表 id标识符 ，所以 href 的属性值应该为 #box 。这就是锚点定位。

所以，需在顶部盒子里放置 a 标签，底部盒子里的盒子的数量 与之对应 ，且按照 锚点定位 ，顶部盒子里的 a 标签的 href 属性值与底部盒子里的盒子的 id 名相对应。

<!-- 顶部盒子 start -->
<div class="top">
 <a href="#div1">div1</a>
 <a href="#div2">div2</a>
 <a href="#div3">div3</a>
 <a href="#div4">div4</a>
</div>
<!-- 顶部盒子 end -->

<!-- 底部盒子 start -->
<div class="bottom">
 <div id="div1">div1的内容区域</div>
 <div id="div2">div2的内容区域</div>
 <div id="div3">div3的内容区域</div>
 <div id="div4">div4的内容区域</div>
<div>
<!-- 底部盒子 end -->

完成基本的CSS布局

这时候，因为之前已经完成了三个盒子的布局，所以现在只需要对 a 标签和与其对应的 div内容区域 进行基本的布局就可以了。

首先来设置 a 标签，因为 a 标签是行内元素，所以得先设置为块级元素，又因为块级元素独占一行，所以得浮动起来，然后设置一些基本的样式就可以了。

.top a {
  text-decoration: none;
  color: black;
  display: block;
  float: left;
  width: 25%;
  height: 100%;
  background: pink;
  text-align: center;
  font: 22px/150px '微软雅黑';
}

接下来设置 div内容区域 ，因为是当点击某一个超链接时显示与之对应的内容区域，所以得先隐藏所有的内容区域，然后再让第一个内容区域显示，之后设置一些基本的样式就可以了。

.bottom div {
  width: 100%;
  height: 100%;
  text-align: center;
  font: 40px/300px '微软雅黑';
  display: none;
}

#div1 {
  display: block;
}

设置好之后，页面应该是这样的：

实现最终效果

现在就可以用 :target 伪类选择器，能够捕获到 URL 后面跟锚点#指向文档内某个具体的元素，这个被链接的元素就是 :target 能够捕获的元素。

用该选择器 :target 捕获到以后，也就是我们要将其对应的内容区域显示，所以对它设置为显示即可。

:target {
  display: block;
}

现在还有问题：因为默认是所有的内容区域都要隐藏，然后再单独让第一个内容区域显示，但现在如果点击第二个超链接，就会显示第二个内容区域，但第一个内容区域还是会跟着显示，所以要用到一个很厉害的东西，但其实很简单，只需要给内容区域设置背景颜色就可以了，同时还需要让内容区域在同一位置，这样当第一个内容区域隐藏了，除第一个内容区域之外要显示的内容区域就跟着显示，就能够实现出一个切换的效果。

.bottom div {
  position: absolute;
  background: #fff;
}

注意 ：背景颜色根据当前页面的背景颜色来设置，否则会出现一些BUG！

结论

其实这一个小的效果运用了很多技术，如果说基础不够扎实，你可能会完全看不懂这篇文章，或者说一直在一个地方上想不通。有什么难题欢迎来联系我！