底部导航切换（跳转后），修改样式

先上效果：

 

<style>
.tabs{display: flex;width: 100%;justify-content: space-around;position: fixed;bottom: 0;background: #ffffff;height: 3rem;color: #3e3e3e;}
.tabs .active{color:#3d98e1}
.tabs .iconfont{display: block;text-align: center;line-height: 14px;font-size: 22px;}
.tabs a{padding: 16px 0px;color: #6E6E6E;}
.tabs a span{line-height: 14px;font-size: 12px;}
</style>
<div class="tabs">
<a href="{:Url('Index/index')}">
<i class="icon iconfont icon-home"></i><span>首页</span>
</a>
<a href="{:Url('Index/indexs')}">
<i class="iconfont icon-wrench"></i><span>我要报修</span>
</a>
<a href="{:Url('Manager/index')}">
<i class="iconfont icon-upload-demo"></i><span>订单管理</span>
</a>
<a href="{:Url('Manager/members')}">
<i class="icon iconfont icon-people"></i><span>个人中心</span>
</a>
</div>
<script type="text/javascript">
;(function(){
var tabs = document.querySelectorAll(".tabs a")
for(var i = 0; i < tabs.length; i++){
if( tabs[i].href === String(window.location)){
tabs[i].classList.add('active')
}
}
})()
</script>

 

转载于:https://www.cnblogs.com/roseY/p/9511648.html