有时候我们要实现如下选中效果:
我给出一种解决办法:
首先选中的时候,加一个class(active),未选中的全部加一个class(inactive),外层给一个1px border,每个选项给一个1px border,最后active和inactive里面border的颜色不一样。
点击的时候用ng-class实现变化。
结构
<footer ng-if="page.isSmf"> <a href="javascript:;" class="sy active" ng-click="page.jump('home')"><p class="iconfont">�</p><p class="flmodule">首页</p></a> <a href="javascript:;" class="sy inactive" ng-click="page.jump('list')"><p class="iconfont">�</p><p class="flmodule">分类</p></a> <a href="javascript:;" class="sy inactive" ng-click="page.jump('shopcart')"><p class="iconfont">�</p><p class="flmodule">购物车</p></a> <a href="javascript:;" class="sy inactive" ng-click="page.jump('userinfo')"><p class="iconfont">�</p><p class="flmodule">个人中心</p></a> </footer>
样式less文件内容
footer{ position: fixed; left: 0; bottom: 0; 100%; height: .99rem; box-sizing: border-box; border-top: 1px solid #8bc6f9; background: f7f7f7; a{ color: #6a6e78; float: left; 25%; height: 100%; text-align: center; padding-top: .1rem; box-sizing: border-box; .iconfont{ font-size: .46rem; } .flmodule{ margin-top: .08rem; } &.active{ border-top: 1px solid #62b2eb; color: #008cd6; } &.inactive{ border-top: 1px solid #8bc6f9; } } }