AngularJS学习第二天：tab标签页切换效果

今天的实例是什么？

是一个前端常见的tab标签页切换效果（效果预览如下）

QQ截图20160923214151.png

涉及指令

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

 
    

//HTML


 
     优选圈内容
     游记内容
     购物车内容
     个人中心内容
 
  
   优选圈
   游记
   购物车
   个人中心

说明

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

//HTML

优选圈内容

游记内容

购物车内容

个人中心内容


----
华丽的分割线   

---

> 第三种写法纯属个人想法，想起来就写下了，不想尝鲜请略过