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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

不同的地方在于，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');

}

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51

解释一下：图片的后缀有gray的就是灰色的icon图标，有green就是绿色高亮的图标。

icon图标 是根据不同的页面切换，更改不同的class来操作的，文字的高亮也是根据点击不同的文字，用selected来控制文字点击显示后的效果。

布局很有用，尽量在a标签上直接给class加样式，文字部分只显示文字，这样在切换图片的时候，会比较方便，止痒更改当前的class的选择就好了。如果你图片一个div,文字又一个div，这样子在做切换的时候，会比较麻烦，会增加更多的工作量。

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