AngularJS怎么實(shí)現(xiàn)tab選項(xiàng)卡-創(chuàng)新互聯(lián)

這篇文章主要介紹了AngularJS怎么實(shí)現(xiàn)tab選項(xiàng)卡，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年積累的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有黑河免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

JS是什么

JS是JavaScript的簡(jiǎn)稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果，讓網(wǎ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'>斷橋殘雪、千百度、幻聽、想象之中</div>
        <div ng-show='activeTab==2'>紅塵客棧、牛仔很忙、給我一首歌的時(shí)間、聽媽媽的話</div>
        <div ng-show='activeTab==3'>被風(fēng)吹過的夏天、江南、一千年以后</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ù)覽

AngularJS怎么實(shí)現(xiàn)tab選項(xiàng)卡

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

選項(xiàng)卡的內(nèi)容是顯示還是隱藏是由activeTab的值決定的，而這個(gè)值是通過選項(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)容是固定的，不好去改變，所以接下來我們將上面的代碼改成下面這種形式

四、改版

<!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":"斷橋殘雪、千百度、幻聽、想象之中"},
        {"list":"周杰倫","con":"紅塵客棧、牛仔很忙、給我一首歌的時(shí)間、聽媽媽的話"},
        {"list":"林俊杰","con":"被風(fēng)吹過的夏天、江南、一千年以后"},
        {"list":"陳奕迅","con":"十年、K歌之王、浮夸"}
      ];
      var selected=$scope.selected;
      $scope.show=function(index){
        $scope.selected=index;
      };
    });
  </script>
</html>

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“AngularJS怎么實(shí)現(xiàn)tab選項(xiàng)卡”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站m.rwnh.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱欄目：AngularJS怎么實(shí)現(xiàn)tab選項(xiàng)卡-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://m.rwnh.cn/article18/dgsggp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、App開發(fā)、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、電子商務(wù)、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

AngularJS怎么實(shí)現(xiàn)tab選項(xiàng)卡-創(chuàng)新互聯(lián)

JS是什么