由于之前没写过这养分开切换显示的操作，只写过针对当前工具进行切换，但是，实在事理和思路很大略：
便是点击选中当前元素，改变当前元素的显示效果，当切换另一个元素的时候，移除当前元素的状态，将切换后的元素加上高亮的显示效果。
我首先想到的便是利用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>
1234567891011HTML部分（我的）：
<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>
123456789101112不同的地方在于，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');
}
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051阐明一下：图片的后缀有gray的便是灰色的icon图标，有green便是绿色高亮的图标。
icon图标 是根据不同的页面切换，变动不同的class来操作的，笔墨的高亮也是根据点击不同的笔墨，用selected来掌握笔墨点击显示后的效果。
布局很有用，只管即便在a标签上直接给class加样式，笔墨部分只显示笔墨，这样在切换图片的时候，会比较方便，止痒变动当前的class的选择就好了。如果你图片一个div,笔墨又一个div，这样子在做切换的时候，会比较麻烦，会增加更多的事情量。
CSS如果能办理掉问题，能不用javascript的地方，就只管即便少用javascript来实现。
