相关文章推荐
今天的实例是什么？
是一个前端常见的tab标签页切换效果（效果预览如下）
涉及指令
- ng-controller
- ng-show
- ng-class
- ng-click
实现步骤与说明
实现逻辑
a.实现逻辑是我们设置一个变量（focusIndex）记录当前聚焦的是哪个
b.设置一个函数（focus）来改变当前聚焦的tab
c.当focusIndex==0的时候让 优选圈内容 显示， 优选圈 所属的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">优选圈内容</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>优选圈</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表达式，决定是否显示还是隐藏节点
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">优选圈内容</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>优选圈</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:'优选圈'},
{_class:'topics',text:'游记'},
{_class:'message',text:'购物车'},
{_class:'user',text:'个人中心'}
],
cons:['优选圈内容区域','游记内容区域','购物车内容区域','个人中心内容区域']
}
}
</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>
> 今天的实例就到这儿吧