相關文章推薦
今天的實例是什么干跛？
是一個前端常見的tab標簽頁切換效果（效果預覽如下）
涉及指令
- ng-controller
- ng-show
- ng-class
- ng-click
實現步驟與說明
實現邏輯
a.實現邏輯是我們設置一個變量（focusIndex）記錄當前聚焦的是哪個
b.設置一個函數（focus）來改變當前聚焦的tab
c.當focusIndex==0的時候讓 優(yōu)選圈內容 顯示衔沼， 優(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)選圈內容</div>
<div class="page" ng-show="focusIndex==1">游記內容</div>
<div class="page" ng-show="focusIndex==2">購物車內容</div>
<div class="page" ng-show="focusIndex==3">個人中心內容</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 根據 = 號后邊的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)有時候我們需要根據某個變量的值來確定是否給一個元素某樣式（比如我們上邊程序中我們用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; //獲得現在的樣式
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)選圈內容</div>
<div class="page" ng-show="focusIndex==1">游記內容</div>
<div class="page" ng-show="focusIndex==2">購物車內容</div>
<div class="page" ng-show="focusIndex==3">個人中心內容</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>
----
華麗的分割線
---
> 第三種寫法純屬個人想法厚掷，想起來就寫下了弟灼，不想嘗鮮請略過
//JS
<script src="angular-1.3.0.js"></script>
<script>
function myTabCtrl($scope){
$scope.focusIndex=0;
$scope.focus=function(index){
$scope.focusIndex=index;
}
$scope.tabs={
navs:[
{_class:'home',text:'優(yōu)選圈'},
{_class:'topics',text:'游記'},
{_class:'message',text:'購物車'},
{_class:'user',text:'個人中心'}
],
cons:['優(yōu)選圈內容區(qū)域','游記內容區(qū)域','購物車內容區(qū)域','個人中心內容區(qū)域']
}
}
</script>
//HTML
<body ng-app="" ng-controller="myTabCtrl">
<div class="pages">
<div class="page" ng-repeat="con in tabs.cons" ng-show="focusIndex==$index">{{con}}</div>
</div>
<nav>
<a
class="{{nav._class}}"
ng-class="{'active':focusIndex==$index}"
ng-repeat="nav in tabs.navs" href="javascript:;"
ng-click="focus($index)">
<i></i>{{nav.text}}
</a>
</nav>
</body>
> 今天的實例就到這兒吧