Npcink Blog
切换菜单

怎么用纯 css 实现 Tab 切换？ - css 笔记

当我们思考能否用 css 来实现时还应考虑到 html 的结构，能不能构造出满足 css 已存在的选择器的 html 布局，这一节和大家分享怎么用纯 css 实现 Tab 切换

最后更新于
本页目录5 节

css 实现依赖于 html 结构，因为 css 选择器有限，有子选择器，没有父选择器，有后选择器，没有前选择器，所以局限性很大。所以当我们思考能否用 css 来实现时还应考虑到 html 的结构，能不能构造出满足 css 已存在的选择器的 html 布局

前言

哪些简单的效果可以考虑用 css 来实现呢，目前 css 能够做的交互有

  • 鼠标经过/离开：hover
  • 鼠标点击：:cheked

那是不是上述所有的交互都可以用 css 来实现呢？显然不是的，css 实现依赖于 html 结构，因为 css 选择器有限，有子选择器，没有父选择器，有后选择器，没有前选择器，所以局限性很大。所以当我们思考能否用 css 来实现时还应考虑到 html 的结构，能不能构造出满足 css 已存在的选择器的 html 布局。

效果展示；

111
222
333

.tab-content{ position:absolute; border:1px solid #eee; padding:20px; left:0; top:36px; bottom:0; right:0; background:#fff; }

.tabs input:checked+.tab-item+.tab-content{ z-index:1 }

先从 html 结构说起

一般在碰到 tab 类型的组件时，一般会有如下的 html

<div class="tabs">
  <div class="tab-nav">
    <div class="tab-item">tab01</div>
    <div class="tab-item">tab02</div>
    <div class="tab-item">tab03</div>
  </div>
  <div class="tab-content">
    <div>111</div>
    <div>222</div>
    <div>333</div>
  </div>
</div>

大致就是这种布局吧，暂且称作分离模式吧，足够灵活，就是导航部分和内容结构分开，需要什么动画效果都可以分别实现。

还有一种布局，大概是这样的

<div class="tabs">
  <div class="tab-pane">
    <div class="tab-item">tab01</div>
    <div class="tab-content">111</div>
  </div>
  <div class="tab-pane">
    <div class="tab-item">tab01</div>
    <div class="tab-content">111</div>
  </div>
  <div class="tab-pane">
    <div class="tab-item">tab01</div>
    <div class="tab-content">111</div>
  </div>
</div>

这里每一个 tab 里面的导航和内容是一起的，我们称为合并模式吧，这种在组件化里面很常见，比如在react里面，一个tab组件，一般会写成这样

ReactDOM.render(
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>,
mountNode);

是不是很像？

相信用 js 只要是一名合格的前端都能轻易的实现吧，这里我们主要是研究如何用 css 来实现

第一种布局（分离模式）

这里有两种思路

  1. 锚点实现 herf + :target
  2. css3 nth-child(n) 选择器

锚点实现主要是在a标签加上href属性，然后目标元素上添加相同的id，当点击a标签时，目标元素的:target就生效了

<style>
#item01:target{ background:red }
</style>
<a href="#item01">跳转</a>
<div id="item01">内容</div>

这种方式可以将导航和内容链接到一块，但是在浏览器中有一个很不友好的地方，就是当点击带有锚点的a链接的时候，浏览器会自动定位到目标位置，很影响体验，需要去掉这种效果估计还得借助 js 来实现，故不太推荐用这种方式

nth-child(n) 选择器，这种方式就比较传统了，不过导航切换部分还是用到label+input[type=radio]，实现基本和 js 是同一个思路，甚至还不如 js 方便，因为你有多少个 tab 选项就得写多少个nth-child样式

.tab-nav input:nth-of-type(1):checked ~ .tab-content :nth-of-type(1),
.tab-nav input:nth-of-type(2):checked ~ .tab-content :nth-of-type(2),
.tab-nav input:nth-of-type(3):checked ~ .tab-content :nth-of-type(3),
...
{
  z-index:1
}

你大概会看到这样的样式，如果选项卡比较固定，基本是静态的，比较少，可以一一写出来，如果比较多，或者是 js 生成的，那么建议这一部分样式也通过 js 生成出来。

下面着重来实现第二种布局

第二种布局（合并模式）

如果是这样一种布局，那么导航和内容就可以通过相邻选择器+联系上了，重点是如何实现选项卡的样式，当然，我们也需要改一下html

<div class="tabs">
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab01"/>
    <label class="tab-item" for="tab01">tab01</label>
    <div class="tab-content">111</div>
  </div>
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab02"/>
    <label class="tab-item" for="tab02">tab02</label>
    <div class="tab-content">222</div>
  </div>
  <div class="tab-pane">
    <input type="radio" name="tab" id="tab03"/>
    <label class="tab-item" for="tab03">tab03</label>
    <div class="tab-content">333</div>
  </div>
</div>

然后我们通过样式美化一下

.tabs{
  position:relative;
  width:400px;
  height:300px;
}
.tab-pane{
  display:inline-block;
}
.tabs input[type='radio']{
  position:absolute;
  clip:rect(0,0,0,0)
}
.tab-item{
  display:block;
  height:34px;
  line-height:34px;
  cursor:pointer;
  padding:0 10px
}


.tab-content{
  position:absolute;
  border:1px solid #eee;
  padding:20px;
  left:0;
  top:36px;
  bottom:0;
  right:0;
  background:#fff;
}

然后加入交互，主要就是相邻选择器+和:checked选择器，

.tabs input[type='radio']:checked+.tab-item{/**导航选中状态**/
  background:orangered;
  color:#fff
}
.tabs input[type='radio']:checked+.tab-item+.tab-content{/**当前内容切换**/
  z-index:1
}

我们这里只用了z-index:1就实现了隐藏显示，当然还可以实现更多的效果，比如淡入淡出等

演示效果见页底 Demo2

当然，这种方式也有一定的不足，由于这里内容区域用到了绝对定位，所以整个 tab 容器就不能根据里层的内容来自适应，也需要给外层一个固定的高度，不然整个 tab 容器就只有顶部导航区域才占据空间，这明显就不合常理。

添加一点动画效果

/**给导航添加横条的缩放效果**/
.tab-item:after{
  position:absolute;
  content:'';
  height:3px;
  width:100%;
  background:orangered;
  left:0;
  bottom:2px;
  transition:.3s;
  transform:scaleX(0)
}


.tabs input[type='radio']:checked+.tab-item:after{
  transform:scaleX(1)
}
/**给内容区域添加一个淡入淡出的效果**/
.tab-content{
  position:absolute;
  background:#eee;
  padding:20px;
  left:0;
  top:36px;
  bottom:0;
  right:0;
  transition:.3s;
  opacity:0;
  transform:translateY(50px)
}


.tabs input[type='radio']:checked+.tab-item+.tab-content{
  z-index:1;
  opacity:1;
  transform:translateY(0)
}

演示效果见页底 Demo3

小节

通过 css 我们也能实现导航效果，而且更容易复用，只需要复制 html 结构就行（当然这里肯定也是需要改一下name和id的）。这就有点类似组件的意思了，给你一个 html 结构，你不需要关系切换逻辑，只需要根据接口取到数据，然后塞到每个 tab 标签页里面去，事实上现在react实现的组件也一般都是这种思路，只需关注业务逻辑，但这些都是大工程，哪里有 css 直接来的快。

这就让我想到了刚进公司那会，每碰到一个 tab，那就要取一个id，然后用jquery实现一遍 tab 切换逻辑，后来放聪明了，把 tab 封装成一个插件，碰到一个 tab 就调用一次插件…看着代码变少了，其实也没什么本质区别。

用 css 来实现的好处就是可以尽量大的把组件功能和业务逻辑分离开来，真正做一个UI组件该做的事，希望 css 越来越好