一些切图小技巧总结
一、js + css实现tab及内容切换（分离式）
tabs切换主要有两种：一种是将tab和内容写到一起（合并式）；还有一种式将tab和info放在不同位置，可称分离式。
今天处理到简单的tab切图，简单观察了一下iView是怎么实现的（合并式）：发现每次切换时都在info外层容器加上了transform属性来实现，尝试以后有如下效果
js+tab实现tab及其内容切换
主要逻辑在于js部分：每次点击后修改transform属性，并将translateX设置为当前tab索引的-100%
tabClick: function (item, index) {
if (item.value !== this.flag) {
this.flag = item.value;
this.initSlide(index * 100);
}
},
initSlide: function (value) {
$('.tab-info').css('transform', 'translate(-' + value + '%)');
}
二、带边框的tab如何丝滑切换边框(纯css) 主要重点在于统一样式和兄弟选择器（+）的应用，效果图如下：
- 统一样式：指每个tab-item的边框都只包含上下左（last-child需加上右）
- 兄弟选择器：指当前选中的tab-item的下一个兄弟节点的左边框需设置为unset，在此基础上直接设置选中item的全部边框即可。
三、碎碎念
最近在整理模板和总结，切图总是很慢啊，有没有啥快速的方法。AI进步太快，我等初级望尘莫及啊
