AngularJS學(xué)習(xí)第二天：tab標(biāo)簽頁(yè)切換效果

相關(guān)文章推薦

Angular學(xué)習(xí)第一天：登錄功能

今天的實(shí)例是什么？

是一個(gè)前端常見(jiàn)的tab標(biāo)簽頁(yè)切換效果（效果預(yù)覽如下）

QQ截圖20160923214151.png

涉及指令

  • ng-controller
  • ng-show
  • ng-class
  • ng-click

實(shí)現(xiàn)步驟與說(shuō)明

實(shí)現(xiàn)邏輯
a.實(shí)現(xiàn)邏輯是我們?cè)O(shè)置一個(gè)變量（focusIndex）記錄當(dāng)前聚焦的是哪個(gè)
b.設(shè)置一個(gè)函數(shù)（focus）來(lái)改變當(dāng)前聚焦的tab
c.當(dāng)focusIndex==0的時(shí)候讓 優(yōu)選圈內(nèi)容 顯示， 優(yōu)選圈 所屬的a標(biāo)簽添加上聚焦樣式"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;
    }

第一種寫(xiě)法HTML結(jié)構(gòu)和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">購(gòu)物車(chē)內(nèi)容</div>
     <div class="page" ng-show="focusIndex==3">個(gè)人中心內(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>購(gòu)物車(chē)</a>
   <a class="user" ng-class="{'active':focusIndex==3}" href="javascript:;" ng-click="focus(3)"><i></i>個(gè)人中心</a>
  </nav>
</body>

說(shuō)明

  • ng-show 根據(jù) = 號(hào)后邊的js表達(dá)式，決定是否顯示還是隱藏節(jié)點(diǎn) 
     ng-show="我是一個(gè)返回布爾值的表達(dá)式"   
 比方你可以寫(xiě) 1==2  某個(gè)變量   某個(gè)變量=1  某個(gè)變量！=1
  • 有一個(gè)與 ng-show 功能相似的指令 ng-hide 同樣接受一個(gè)返回布爾值表達(dá)式
  • ng-class 指令 允許我們?cè)诔绦蜻\(yùn)行的時(shí)候給元素添加class
    (1) 有時(shí)候我們需要程序來(lái)確定要給一個(gè)元素什么樣式，我們可以這么做

$scope.addClass="newclass"
ng-class="addClass"
//加入元素之前有樣式 user 程序運(yùn)行后的樣式為　class="user newclass"

(2)有時(shí)候我們需要根據(jù)某個(gè)變量的值來(lái)確定是否給一個(gè)元素某樣式（比如我們上邊程序中我們用focusIndex是否等于tab的索引來(lái)判斷加不加active這個(gè)樣式），我們可以這么做

$scope.focusIndex=0;
ng-class="{'active':focusIndex==0,class2:condition2}"
//這種寫(xiě)法接受一個(gè)對(duì)象，屬性是要添加的樣式，值是判斷條件

----
華麗的分割線   

---
>  有人說(shuō)，判斷條件好長(zhǎng)啊，我習(xí)慣自己寫(xiě)代碼添加和刪除樣式，OK ！ No problem
我提供了第二種寫(xiě)法

//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";//給當(dāng)前應(yīng)該聚焦的添加上聚焦
}
}
</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">購(gòu)物車(chē)內(nèi)容</div>
<div class="page" ng-show="focusIndex==3">個(gè)人中心內(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>購(gòu)物車(chē)</a>
<a class="user" href="javascript:;" ng-click="focus(3)"><i></i>個(gè)人中心</a>
</nav>
</body>


----
華麗的分割線   

---

> 第三種寫(xiě)法純屬個(gè)人想法，想起來(lái)就寫(xiě)下了，不想嘗鮮請(qǐng)略過(guò)

//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:'購(gòu)物車(chē)'},
        {_class:'user',text:'個(gè)人中心'}
        ],
        cons:['優(yōu)選圈內(nèi)容區(qū)域','游記內(nèi)容區(qū)域','購(gòu)物車(chē)內(nèi)容區(qū)域','個(gè)人中心內(nèi)容區(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>



>  今天的實(shí)例就到這兒吧
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容