效果,点击按钮样式改变
html
<body ng-app="checkItemApp">
<!-- 内容 -->
<div class="content" ng-controller="checkItemController">
<!-- 导航栏 -->
<ul class="navTabList">
<li class="navTabItem" ng-class="{'active':navTab==0}">
<a href="" class="navTabLink" ng-click="changeNavTab(0)">按钮一</a>
</li>
<li class="navTabItem" ng-class="{'active':navTab==1}">
<a href="" class="navTabLink" ng-click="changeNavTab(1)">按钮二</a>
</li>
<li class="navTabItem" ng-class="{'active':navTab==2}">
<a href="" class="navTabLink" ng-click="changeNavTab(2)">按钮三</a>
</li>
<li class="navTabItem" ng-class="{'active':navTab==3}">
<a href="" class="navTabLink" ng-click="changeNavTab(3)">按钮四</a>
</li>
</ul>
<!-- 内容 -->
<div ng-show="navTab==0">
按钮一
</div>
<div ng-show="navTab==1">
按钮二
</div>
<div ng-show="navTab==2">
按钮二
</div>
<div ng-show="navTab==3">
按钮三
</div>
</div>
</body>
js
// 创建angular模块
var checkItemApp = angular.module("checkItemApp",[]);
checkItemApp.controller("checkItemController",function($scope){
// tab默认选中
$scope.navTab=0;
// 切换标签
$scope.changeNavTab = function(navTab){
if(navTab == 0){
$scope.navTab=0;
console.log(0)
}else if(navTab == 1){
$scope.navTab=1;
console.log(1)
}else if(navTab == 2){
$scope.navTab=2;
console.log(2)
}else if(navTab == 3){
$scope.navTab=3;
console.log(3)
}
}
})
样式
.navTabItem{
font-size: 16px;
font-weight: bold;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
}
.navTabLink{
display: block;
position: relative;
padding: 10px 20px;
text-decoration: none;
color: #000;
-webkit-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.navTabLink::before{
content: "";
position: absolute;
bottom: -2px;
width: 0;
left:0;
}
.active{
border-bottom:solid 2px #28a3ef;
}
.navTabList>li.active>a{
color:#28a3ef;
}
.navTabLink:hover{
color:#28a3ef;
}
.navTabLink:hover:before{
width:100%;
}
.navTabLink:before{
-webkit-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
}