用bootstrap的tab插件做一个图层切换效果（感觉会误导淫们，大家当乐子看吧）_html/css_WEB-ITnose
最近做的项目为了考虑以后的移动设备兼容性，所以用了Bootstrap。首页有一个需要鼠标点击不一样的按钮固定位置图层内容变化的效果（我描述清楚了吗Orz……），如下图：
分别点击1，2，3，4按钮时现实对应的内容变化。
我就呵呵了，这个跟tab插件很类似啊~~不就是点按钮换图层吗。如果在别处找独立插件，我这记性的，项目js文件里早晚被我弄得乱七八糟我都不知道是啥功能文件了，所以动手改样式吧，先上个前后对比：
修改前：
修改后：（涉及公家去掉了挺多，大家凑或看，别评价色彩搭配啊，软肋~~）
下面写下思路啊：
1.左侧按钮的实现
原来的tab按钮酱紫滴，要变成而且要在内容图层左侧。
1.1看下结构哈
一个UL(按钮)，一个DIV（内容）。
所以俺滴做法是直接给ul加了个Class：
- ，给DIV加了
- 加样式了。变成块状元素，设置长宽，float：left等等。
1.2Font Awesome字体
这里说个知识点为了自己记住：
为了鼠标划过图表跟着变换颜色，所以每个按钮里的图标用图标字体设置。这里用的 Font Awesome V4.3.0。
这么多图标竟然没有自己需要的，所以用到了图标组合。方法如下：
于是有了这段代码：就是一个圆图标和一个向上的箭头组合在在一起：
-
然后就是给
- 里面的
那啥我去玩了儿，以后写，啦啦啦……
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频