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