我们今天用css来实现一个常见的tab切换效果
先看效果
https://codepen.io/xboxyan/pe...点击预览
前言
哪些简单的效果可以考虑用css来实现呢，目前css能够做的交互有
- 鼠标经过/离开：
hover - 鼠标点击：
:cheked
那是不是上述所有的交互都可以用css来实现呢？显然不是的，css实现依赖于html结构，因为css选择器有限，有子选择器，没有父选择器，有后选择器，没有前选择器，所以局限性很大。所以当我们思考能否用css来实现时还应考虑到html的结构，能不能构造出满足css已存在的选择器的html布局。
先从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来实现。
第一种布局（分离模式）
这里有两种思路
- 锚点实现
herf+:target - 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就实现了隐藏显示，当然还可以实现更多的效果，比如淡入淡出等
下面是演示效果
https://codepen.io/xboxyan/pe...点击预览
当然，这种方式也有一定的不足，由于这里内容区域用到了绝对定位，所以整个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) }
https://codepen.io/xboxyan/pe...点击预览
小节
通过css我们也能实现导航效果，而且更容易复用，只需要复制html结构就行（当然这里肯定也是需要改一下name和id的）。这就有点类似组件的意思了，给你一个html结构，你不需要关系切换逻辑，只需要根据接口取到数据，然后塞到每个tab标签页里面去，事实上现在react实现的组件也一般都是这种思路，只需关注业务逻辑，但这些都是大工程，哪里有css直接来的快。
这就让我想到了刚进公司那会，每碰到一个tab，那就要取一个id，然后用jquery实现一遍tab切换逻辑，后来放聪明了，把tab封装成一个插件，碰到一个tab就调用一次插件...看着代码变少了，其实也没什么本质区别。
用css来实现的好处就是可以尽量大的把组件功能和业务逻辑分离开来，真正做一个UI组件该做的事，希望css越来越好。
