标签：

小伙伴们啊，我JS真的是个渣渣，所以总想要偷懒，于是为了实现效果就把tab插件给改了（各位大神轻拍啊，我是小白，很纯洁滴，小心脏也很脆弱）……

        最近做的项目为了考虑以后的移动设备兼容性，所以用了Bootstrap。首页有一个需要鼠标点击不一样的按钮固定位置图层内容变化的效果（我描述清楚了吗Orz……），如下图：

                                                                                     分别点击1，2，3，4按钮时现实对应的内容变化。

      我就呵呵了，这个跟tab插件很类似啊~~不就是点按钮换图层吗。如果在别处找独立插件，我这记性的，项目js文件里早晚被我弄得乱七八糟我都不知道是啥功能文件了，所以动手改样式吧，先上个前后对比：

      修改前：

     修改后：（涉及公家去掉了挺多，大家凑或看，别评价色彩搭配啊，软肋~~）

    下面写下思路啊：

        1.左侧按钮的实现

                                    原来的tab按钮酱紫滴，要变成而且要在内容图层左侧。

                   1.1看下结构哈

                                                            一个UL(按钮)，一个DIV（内容）。

                          所以俺滴做法是直接给ul加了个Class：<ul class="clearfix col-lg-4">，给DIV加了<div class="tab-content  col-lg-8 ">。

                          然后就是给<ul>里面的<li>加样式了。变成块状元素，设置长宽，float：left等等。

                  1.2Font Awesome字体

                          这里说个知识点为了自己记住：

                          为了鼠标划过图表跟着变换颜色，所以每个按钮里的图标用图标字体设置。这里用的 Font Awesome V4.3.0。

                         这么多图标竟然没有自己需要的，所以用到了图标组合。方法如下：

于是有了这段代码：就是一个圆图标和一个向上的箭头组合在在一起： 

          <li class="li_1 active">
           <a data-toggle="tab" href="#panel-11">
            <span class="fa-stack fa-lg">
              <i class="fa fa-genderless fa-stack-2x"></i>
              <i class="fa fa-level-up fa-stack-1x"></i>
            </span><br/></a>
          </li>

        那啥我去玩了儿，以后写，啦啦啦……             

用bootstrap的tab插件做一个图层切换效果（感觉会误导淫们，大家当乐子看吧）

标签：

原文地址：http://www.cnblogs.com/xiaolu-web/p/4271147.html