2px边框，4分之1内边框实现选中功能实现

有时候我们要实现如下选中效果：

我给出一种解决办法：

首先选中的时候，加一个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;
    width: 100%;
    height: .99rem;
    box-sizing: border-box;
    border-top: 1px solid #8bc6f9;
    background: f7f7f7;
    a{
        color: #6a6e78;
        float: left;
        width: 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;
        }
    }
}