仿微信移动端的底部导航切换，显示高亮文字和图片

在实现移动手机端的操作时，难免会需要用到切换icon 高亮的操作，下面就来说说切换这点事。

因为之前没写过这养分开切换显示的操作，只写过针对当前对象进行切换，但是，其实原理和思路很简单：

就是点击选中当前元素，改变当前元素的显示效果，当切换另一个元素的时候，移除当前元素的状态，将切换后的元素加上高亮的显示效果。

我首先想到的就是使用javascript的removecClass和addClass来进行操作，因为之前有写过密码的显示和隐藏的效果：密码的明文密文的显示和隐藏效果，采用的就是removecClass和addClass来实现的。

在实现底部导航切换的过程中，我也使用了这种方式，但是，后来我想，如果用户在网页端查看的时候，禁掉了javascript的执行，样式的功能就不能达到我预期想要达到的效果了。所以，在js无果之后，遂决定采用CSS来进行操作。

---

HTML部分（经验）：

<div class="btn_menubar_bottom">
  <div class="btn_experience"></div>
    <a href="" class="btn-not-experience btn-experience"> //重点
      <span class="play_experience selected">经验</span>
    </a>
  <div class="btn_avator">
    <a href="" class="btn-not-avatared btn-avatared"> //重点
      <span class="play_avatar">我的</span> 
    </a>
  </div>
</div>

---

HTML部分（我的）：

<div class="btn_menubar_bottom">
  <div class="btn_experience">
    <a href="" class="btn-not-experience"> //重点
      <span class="play_experience">经验</span>
    </a>
  </div>
  <div class="btn_avator">
    <a href="" class="btn-not-avatared"> //重点
      <span class="play_avatar selected">我的</span> 
    </a>
  </div>
</div>

不同的地方在于，a标签里定义的class不同

SCSS部分：

.btn_menubar_bottom {
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  .btn_experience, .btn_avator{
    width: 50%;
    float: left;
    border-top: 1px solid #ddd;
    text-align: center;
  }
  .btn-not-experience {
    background-image: image-url('icon_gray.png');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 50% 8px;
    text-align: center;
    padding-top: 14px;
    font-size: 12px;
    display: inline-block;
    .play_experience {
      &.selected {
        color: #49c114;
      }
    }
  }
  .btn-experience {
    background-image: image-url('icon_green.png');
  }

  .btn-not-avatared {
    background-image: image-url('icon_head_green.png');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 50% 8px;
    text-align: center;
    padding-top: 14px;
    font-size: 12px;
    display: inline-block;
    .play_avatar {
      &.selected {
        color: #49c114;
      }
    }
  }
  .btn-avatared {
    background-image: image-url('icon_head_gray.png');
  }
}

解释一下：图片的后缀有gray的就是灰色的icon图标，有green就是绿色高亮的图标。
icon图标 是根据不同的页面切换，更改不同的class来操作的，文字的高亮也是根据点击不同的文字，用selected来控制文字点击显示后的效果。
布局很有用，尽量在a标签上直接给class加样式，文字部分只显示文字，这样在切换图片的时候，会比较方便，止痒更改当前的class的选择就好了。如果你图片一个div,文字又一个div，这样子在做切换的时候，会比较麻烦，会增加更多的工作量。

---

CSS如果能解决掉问题，能不用javascript的地方，就尽量少用javascript来实现。

---

这样就把效果图要的样式效果实现了 ～