今天的實例是什么？
是一個前端常見的tab標簽頁切換效果（效果預覽如下）
2180072-c814ce4716dff01a.png
涉及指令
- ng-controller
- ng-show
- ng-class
- ng-click
實現(xiàn)步驟與說明
實現(xiàn)邏輯
a.實現(xiàn)邏輯是我們設置一個變量（focusIndex）記錄當前聚焦的是哪個
b.設置一個函數(shù)（focus）來改變當前聚焦的tab
c.當focusIndex==0的時候讓 優(yōu)選圈內(nèi)容 顯示， 優(yōu)選圈 所屬的a標簽添加上聚焦樣式"active"樣式
*{
padding:0px;
margin:0px;
font-size:10px;
font-family:Arial, 'Microsoft YaHei', Helvetica, 'Hiragino Sans GB';
}
.page{
background-color:#f8f8f8;
position: absolute;
top: 0px;
padding-top:50px;
left: 0px;
right: 0px;
bottom: 60px;
overflow: auto;
text-align: left;
text-align: center;
font-size: 2rem;
}
nav{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 60px;
display: flex;
border-top:1px solid #ededed;
background-color: #fff;
}
nav a:link,nav a:visited{
text-decoration:none;
flex: 1;
text-align: center;
box-sizing: border-box;
/* border-right: 1px solid #ededed;*/
color: #666;
padding-top: 5px;
}
nav a:last-child{
border-right: none;
}
nav a.active{
color: #FF4354;
}
nav a i{
display: block;
margin: 0 auto;
width: 25px;
height: 25px;
}
nav a.home.active i{
background: url('images/nav-home-on.png') no-repeat center;
background-size: contain;
}
nav a.home i{
background: url('images/nav-home-off.png') no-repeat center;
background-size: contain;
}
nav a.topics.active i{
background: url('images/nav-circle-on.png') no-repeat center;
background-size: contain;
}
nav a.topics i{
background: url('images/nav-circle-off.png') no-repeat center;
background-size: contain;
}
nav a.message.active i{
background: url('images/nav-message-on.png') no-repeat center;
background-size: contain;
}
nav a.message i{
background: url('images/nav-message-off.png') no-repeat center;
background-size: contain;
}
nav a.user.active i{
background: url('images/nav-mine-on.png') no-repeat center;
background-size: contain;
}
nav a.user i{
background: url('images/nav-mine-off.png') no-repeat center;
background-size: contain;
}
第一種寫法HTML結構和js
//JS
<script src="angular-1.3.0.js"></script>
<script>
function myTabCtrl($scope){
//定義要聚焦的索引
$scope.focusIndex=0;
//更改要聚焦的tab
$scope.focus=function(index){
$scope.focusIndex=index;
}
}
</script>
//HTML
<body ng-app="" ng-controller="myTabCtrl">
<div class="pages">
<div class="page" ng-show="focusIndex==0">優(yōu)選圈內(nèi)容</div>
<div class="page" ng-show="focusIndex==1">游記內(nèi)容</div>
<div class="page" ng-show="focusIndex==2">購物車內(nèi)容</div>
<div class="page" ng-show="focusIndex==3">個人中心內(nèi)容</div>
</div>
<nav>
<a class="home" ng-class="{'active':focusIndex==0}" href="javascript:;" ng-click="focus(0)"><i></i>優(yōu)選圈</a>
<a class="topics" ng-class="{'active':focusIndex==1}" href="javascript:;" ng-click="focus(1)"><i></i>游記</a>
<a class="message" ng-class="{'active':focusIndex==2}" href="javascript:;" ng-click="focus(2)"><i></i>購物車</a>
<a class="user" ng-class="{'active':focusIndex==3}" href="javascript:;" ng-click="focus(3)"><i></i>個人中心</a>
</nav>
</body>
說明
- ng-show 根據(jù) = 號后邊的js表達式，決定是否顯示還是隱藏節(jié)點
ng-show="我是一個返回布爾值的表達式"
比方你可以寫 1==2 某個變量 某個變量=1 某個變量！=1
有一個與ng-show功能相似的指令ng-hide同樣接受一個返回布爾值表達式
ng-class 指令 允許我們在程序運行的時候給元素添加class
（1）有時候我們需要程序來確定要給一個元素什么樣式，我們可以這么做
$scope.addClass="newclass"
ng-class="addClass"
//加入元素之前有樣式 user 程序運行后的樣式為 class="user newclass"
（2）有時候我們需要根據(jù)某個變量的值來確定是否給一個元素某樣式（比如我們上邊程序中我們用focusIndex是否等于tab的索引來判斷加不加active這個樣式），我們可以這么做
$scope.focusIndex=0;
ng-class="{'active':focusIndex==0,class2:condition2}"
//這種寫法接受一個對象，屬性是要添加的樣式，值是判斷條件
分割線
有人說，判斷條件好長啊，我習慣自己寫代碼添加和刪除樣式，OK！No problem
我提供了第二種寫法
//JS
<script src="angular-1.3.0.js"></script>
<script>
function myTabCtrl($scope){
// 定義初始加載要聚焦的tab
$scope.focusIndex=0;
//切換tab的方法
$scope.focus=function(index){
$scope.focusIndex=index;
var aLinks=document.getElementsByTagName('nav')[0].getElementsByTagName('a');
for(var i=0;i<aLinks.length;i++){
var oldClass=aLinks[i].className; //獲得現(xiàn)在的樣式
aLinks[i].className=oldClass.split(' ')[0];//刪除聚焦樣式
//或者 aLinks[i].className=oldClass.replace('active','');
}
aLinks[index].className+=" active";//給當前應該聚焦的添加上聚焦
}
}
</script>
//HTML
<body ng-app="" ng-controller="myTabCtrl">
<div class="pages">
<div class="page" ng-show="focusIndex==0">優(yōu)選圈內(nèi)容</div>
<div class="page" ng-show="focusIndex==1">游記內(nèi)容</div>
<div class="page" ng-show="focusIndex==2">購物車內(nèi)容</div>
<div class="page" ng-show="focusIndex==3">個人中心內(nèi)容</div>
</div>
<nav>
<a class="home" href="javascript:;" ng-click="focus(0)"><i></i>優(yōu)選圈</a>
<a class="topics" href="javascript:;" ng-click="focus(1)"><i></i>游記</a>
<a class="message" href="javascript:;" ng-click="focus(2)"><i></i>購物車</a>
<a class="user" href="javascript:;" ng-click="focus(3)"><i></i>個人中心</a>
</nav>
</body>
