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

在实现移动手机端的操作时，难免会需要用到切换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来实现。

---

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