angularJs 切换Tab 对应改变样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zlzbt/article/details/80000238

跳转到哪个页面对应tab就改变其设置的样式

点击secondPage页面的提交按钮跳转到thirdPage页面   thirdPage的也会相应变成红色

WebApp底部菜单栏的高亮效果需要用到一个指令，其实还需要做一个交互，就是点击的时候需要跳转，像这种情况一般会用到ui.router路由模块的一个指令，跳转一般有两种方法，一种是使用指令进行跳转，一种是利用服务进行跳转。

指令是ui-sref，这相当于给这个元素绑定一个点击事件，当这个元素被点击的时候，它就会跳转到对应的页面或者是路由。

同时被点击的时候，按钮还需要有个高亮的效果，这个指令叫做ui-sref-active=”select”

html

<div class="weui-tabbar" >
        //这个意思是说如果当前点击的路由是dashBoard的话，首先点击这个路由会跳转到dashboard的页面，
        //然后如果当前页面就是它的话,那么就会包含select这个样式类的名称
        <a ui-sref="dashBoard" class="weui-tabbar__item" ui-sref-active="select">
            <div class="weui-tabbar__icon">
                <i class="icon iconfont icon-xinzengyibiaopananniu"></i>
            </div>
            <p class="weui-tabbar__label">仪表盘</p>
        </a>
        <a ui-sref="newVisitStore" class="weui-tabbar__item" ui-sref-active="select">
            <div class="weui-tabbar__icon">
                <i class="icon iconfont icon-xunchatongji"></i>
            </div>
            <p class="weui-tabbar__label">巡检</p>
        </a>
        <a ui-sref="reportList" class="weui-tabbar__item" ui-sref-active="select">
            <div class="weui-tabbar__icon">
                <i class="icon iconfont icon-baogao"></i>
            </div>
            <p class="weui-tabbar__label">报告</p>
        </a>
    </div>

css样式

.select p,
.select i{
	color:rgb(216, 30, 6) !important;
}