欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS實(shí)現(xiàn)tab選項(xiàng)卡的方法詳解

 更新時(shí)間:2017年07月05日 11:49:48   作者:Annexu1991  
這篇文章主要介紹了AngularJS實(shí)現(xiàn)tab選項(xiàng)卡的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了AngularJS實(shí)現(xiàn)tab選項(xiàng)卡的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了AngularJS實(shí)現(xiàn)tab選項(xiàng)卡的方法。分享給大家供大家參考,具體如下:

一、代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html ng-app='app'>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      *{
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .TabNav{
        height: 131px;
        width: 450px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
      }
      .TabNav ul li{
        float: left;
        background: -webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
        border: 1px solid #ccc;
        padding: 5px 0;
        width: 100px;
        text-align: center;
        margin-left: -1px;
        position: relative;
        cursor: pointer;
      }
      .TabCon{
        position: absolute;
        left: -1px;
        top: 30px;
        border: 1px solid #ccc;
        border-top: none;
        width: 403px;
        height: 100px;
      }
      .TabNav ul li.active{
        background: #FFFFFF;
        border-bottom: none;
      }
    </style>
    <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="TabNav">
      <ul ng-init='activeTab=1'>
        <li ng-class='{active:activeTab==1}' ng-click='activeTab=1'>許嵩</li>
        <li ng-class='{active:activeTab==2}' ng-click='activeTab=2'>周杰倫</li>
        <li ng-class='{active:activeTab==3}' ng-click='activeTab=3'>林俊杰</li>
        <li ng-class='{active:activeTab==4}' ng-click='activeTab=4'>陳奕迅</li>
      </ul>
      <div class="TabCon">
        <div ng-show='activeTab==1'>斷橋殘雪、千百度、幻聽(tīng)、想象之中</div>
        <div ng-show='activeTab==2'>紅塵客棧、牛仔很忙、給我一首歌的時(shí)間、聽(tīng)媽媽的話</div>
        <div ng-show='activeTab==3'>被風(fēng)吹過(guò)的夏天、江南、一千年以后</div>
        <div ng-show='activeTab==4'>十年、K歌之王、浮夸</div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    var app=angular.module('app',[]);
    app.controller('tabcontroller',function($scope){
      var vm=$scope.vm;
    });
  </script>
</html>

二、效果預(yù)覽

三、實(shí)現(xiàn)原理

選項(xiàng)卡的內(nèi)容是顯示還是隱藏是由activeTab的值決定的,而這個(gè)值是通過(guò)選項(xiàng)卡上面的ng-click指令設(shè)置的,當(dāng)對(duì)應(yīng)選項(xiàng)卡的內(nèi)容顯示的時(shí)候,給點(diǎn)擊的按鈕添加樣式,這樣做雖然也能實(shí)現(xiàn)選項(xiàng)卡的內(nèi)容,但是這樣做的的弊端是,選項(xiàng)卡的內(nèi)容是固定的,不好去改變,所以接下來(lái)我們將上面的代碼改成下面這種形式

四、改版

<!DOCTYPE html>
<html ng-app='app'>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      *{
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .TabNav{
        height: 131px;
        position: relative;
        margin-left: 100px;
        margin-top: 100px;
      }
      .TabNav ul li{
        float: left;
        background: -webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
        border: 1px solid #ccc;
        padding: 5px 0;
        width: 100px;
        text-align: center;
        margin-left: -1px;
        position: relative;
        cursor: pointer;
      }
      .TabCon{
        position: absolute;
        left: -1px;
        top: 30px;
        border: 1px solid #ccc;
        border-top: none;
        width: 403px;
        height: 100px;
      }
      .TabNav ul li.active{
        background: #FFFFFF;
        border-bottom: none;
      }
    </style>
    <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="TabNav" ng-controller='tabcontroller'>
      <ul ng-init='selected=0'>
        <li ng-class='{active:selected==$index}' ng-click='show($index)' ng-repeat='item in vm'>{{item.list}}</li>
      </ul>
      <div class="TabCon">
        <div ng-show='selected==$index' ng-repeat='item in vm'>{{item.con}}</div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    var app=angular.module('app',[]);
    app.controller('tabcontroller',function($scope){
      $scope.vm=[
        {"list":"許嵩","con":"斷橋殘雪、千百度、幻聽(tīng)、想象之中"},
        {"list":"周杰倫","con":"紅塵客棧、牛仔很忙、給我一首歌的時(shí)間、聽(tīng)媽媽的話"},
        {"list":"林俊杰","con":"被風(fēng)吹過(guò)的夏天、江南、一千年以后"},
        {"list":"陳奕迅","con":"十年、K歌之王、浮夸"}
      ];
      var selected=$scope.selected;
      $scope.show=function(index){
        $scope.selected=index;
      };
    });
  </script>
</html>

說(shuō)明:vm這個(gè)數(shù)組里面是我們自己定義的一些假數(shù)據(jù)(這個(gè)數(shù)據(jù)實(shí)際上是可以從后臺(tái)獲取的),然后我們通過(guò)ng-repeat指令循環(huán)遍歷出vm里面的數(shù)據(jù),插入到頁(yè)面中,$index是每個(gè)內(nèi)容對(duì)象的索引值

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • AngularJS用戶選擇器指令實(shí)例分析

    AngularJS用戶選擇器指令實(shí)例分析

    這篇文章主要介紹了AngularJS用戶選擇器指令,結(jié)合實(shí)例形式分析了angular指令實(shí)現(xiàn)選擇器功能的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2016-11-11
  • AngularJS監(jiān)聽(tīng)ng-repeat渲染完成的兩種方法

    AngularJS監(jiān)聽(tīng)ng-repeat渲染完成的兩種方法

    這篇文章主要介紹了AngularJS監(jiān)聽(tīng)ng-repeat渲染完成的兩種方法,結(jié)合實(shí)例形式分析了AngularJS基于自定義指令及廣播事件實(shí)現(xiàn)監(jiān)聽(tīng)功能的相關(guān)操作技巧,需要的朋友可以參考下
    2018-01-01
  • AngularJS路由實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)實(shí)例

    AngularJS路由實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)實(shí)例

    這篇文章主要為大家詳細(xì)介紹了AngularJS路由實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法示例

    AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法示例

    這篇文章主要介紹了AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法,結(jié)合具體實(shí)例形式分析了ng-class操作頁(yè)面class樣式的相關(guān)技巧,需要的朋友可以參考下
    2017-05-05
  • Angular.js中ng-if、ng-show和ng-hide的區(qū)別介紹

    Angular.js中ng-if、ng-show和ng-hide的區(qū)別介紹

    angularJS中的ng-show、ng-hide、ng-if指令都可以用來(lái)控制dom元素的顯示或隱藏。那么這篇文章就給大家主要介紹了Angular.js中ng-if、ng-show和ng-hide的區(qū)別,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。
    2017-01-01
  • 深入理解Angular.JS中的Scope繼承

    深入理解Angular.JS中的Scope繼承

    這篇文章主要給大家深入的介紹了關(guān)于Angular.JS中Scope繼承的相關(guān)資料,Angular。JS中scope之間的繼承關(guān)系使用JavaScript的原型繼承方式實(shí)現(xiàn),文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。
    2017-06-06
  • AngularJs解決跨域問(wèn)題案例詳解(簡(jiǎn)單方法)

    AngularJs解決跨域問(wèn)題案例詳解(簡(jiǎn)單方法)

    本文通過(guò)一個(gè)案例給大家介紹angularJs解決跨域問(wèn)題,非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧
    2016-05-05
  • 解決Angular.js中使用Swiper插件不能滑動(dòng)的問(wèn)題

    解決Angular.js中使用Swiper插件不能滑動(dòng)的問(wèn)題

    下面小編就為大家分享一篇解決Angular.js中使用Swiper插件不能滑動(dòng)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • Angular實(shí)現(xiàn)防抖和節(jié)流的示例代碼

    Angular實(shí)現(xiàn)防抖和節(jié)流的示例代碼

    這篇博客主要是詳細(xì)介紹兩種常用Angular實(shí)現(xiàn)防抖和節(jié)流的方法:使用RxJS操作符和使用Angular自帶的工具,文中通過(guò)代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下
    2024-02-02
  • Angular實(shí)現(xiàn)圖片裁剪工具ngImgCrop實(shí)踐

    Angular實(shí)現(xiàn)圖片裁剪工具ngImgCrop實(shí)踐

    本篇文章主要介紹了Angular實(shí)現(xiàn)圖片裁剪工具ngImgCrop實(shí)踐,具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-08-08

最新評(píng)論