AngularJS如何實(shí)現(xiàn)標(biāo)簽頁(yè)tab選項(xiàng)卡切換功能

這篇文章將為大家詳細(xì)講解有關(guān)AngularJS如何實(shí)現(xiàn)標(biāo)簽頁(yè)tab選項(xiàng)卡切換功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的金門網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

具體如下：

選項(xiàng)卡一：

JavaScript+html+css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net js標(biāo)簽頁(yè)tab切換</title>
    <style>
      #div1 .active{
        background:blue;
      }
      #div1 div{
        width:200px;
        height:200px;
        background:gray;
        border:1px solid black;
        display:none;
      }
    </style>
    <script>
      window.onload=function (){
        var oDiv=document.getElementById('div1');
        var aBtn=oDiv.getElementsByTagName('input');
        var aDiv=oDiv.getElementsByTagName('div');
        for(var i=0;i<aBtn.length;i++){     //遍歷div1中的按鈕
          aBtn[i].index=i;      //給aBth[]添加自定義屬性
          aBtn[i].onclick=function (){
            for(var i=0;i<aBtn.length;i++){ //遍歷按鈕，將class清除
              aBtn[i].className='';
              aDiv[i].style.display='none';
            }
            this.className='active';
            aDiv[this.index].style.display='block';
          }
        }
      }
    </script>
  </head>
  <body>
    <div id="div1">
      <input class="active" type="button" value="選項(xiàng)1" />
      <input type="button" value="選項(xiàng)2" />
      <input type="button" value="選項(xiàng)3" />
      <input type="button" value="選項(xiàng)4" />
      <div >111</div>
      <div>222</div>
      <div>333</div>
      <div>444</div>
    </div>
  </body>
</html>

運(yùn)行效果（直接在http://tools.jb51.net/code/HtmlJsRun上測(cè)試運(yùn)行）：

AngularJS如何實(shí)現(xiàn)標(biāo)簽頁(yè)tab選項(xiàng)卡切換功能

選項(xiàng)卡二：

angularjs指令：

ng-class、ng-click、ng-if

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net AngularJS標(biāo)簽頁(yè)tab切換</title>
  <style>
    .active {
      background-color: orange;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="s1.app">
<div>
  <button ng-class="{ 'active' : data.current == 1 }" ng-click="actions.setCurrent(1)">張三</button>
  <button ng-class="{ 'active' : data.current == 2 }" ng-click="actions.setCurrent(2)">李四</button>
  <button ng-class="{ 'active' : data.current == 3 }" ng-click="actions.setCurrent(3)">王五</button>
</div>
<div>
  <div ng-if="data.current == 1">張三的個(gè)人信息</div>
  <div ng-if="data.current == 2">李四的個(gè)人信息</div>
  <div ng-if="data.current == 3">王五的個(gè)人信息</div>
  <script>
    var app = angular.module('s1.app', []);
    app.run(function ($rootScope) {
      $rootScope.data = {
        current: "1" // 1代表張三，2代表李四，3代表王五
      };
      $rootScope.actions =
      {
        setCurrent: function (param) {
          $rootScope.data.current = param;
        }
      }
    })
  </script>
</div>
</body>
</html>

運(yùn)行效果（直接在http://tools.jb51.net/code/HtmlJsRun上測(cè)試運(yùn)行）：

AngularJS如何實(shí)現(xiàn)標(biāo)簽頁(yè)tab選項(xiàng)卡切換功能

選項(xiàng)卡三：

angularjs 指令：

ng-class、ng-click、ng-show

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net AngularJS標(biāo)簽頁(yè)tab切換</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<section ng-controller="myCtrl as panel">
  <ul>
    <li ng-class="{active:panel.isSelected(1)}">
      <a href ng-click="panel.selectTab(1)">1111111111</a>
    </li>
    <li ng-class="{active:panel.isSelected(2)}">
      <a href ng-click="panel.selectTab(2)">2222222222</a>
    </li>
    <li ng-class="{active:panel.isSelected(3)}">
      <a href ng-click="panel.selectTab(3)">33333333333</a>
    </li>
  </ul>
  <!--是否點(diǎn)擊-->
  {{panel.isSelected(1)}}
  {{panel.isSelected(2)}}
  {{panel.isSelected(3)}}
  <div class="panel" ng-show="panel.isSelected(1)">
    <h2>我是1111111111111111111111</h2>
  </div>
  <div class="panel" ng-show="panel.isSelected(2)">
    <h2>我是22222222222222222</h2>
  </div>
  <div class="panel" ng-show="panel.isSelected(3)">
    <h2>我是3333333333333333333333</h2>
  </div>
</section>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function () {
    this.tab = 2;/*設(shè)置默認(rèn)*/
    this.selectTab = function (setTab) {/*設(shè)置tab點(diǎn)擊事件*/
      this.tab = setTab;
    };
    this.isSelected = function (checkedTab) {/*頁(yè)面的切換*/
      return this.tab === checkedTab;
    }
  });
</script>
</body>
</html>

運(yùn)行效果（直接在http://tools.jb51.net/code/HtmlJsRun上測(cè)試運(yùn)行）：

AngularJS如何實(shí)現(xiàn)標(biāo)簽頁(yè)tab選項(xiàng)卡切換功能

選項(xiàng)卡四：

angularjs 指令

第二種和第三種方式來(lái)源于下面代碼的改進(jìn)，產(chǎn)生的效果都是一樣的。

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net AngularJS標(biāo)簽頁(yè)tab切換</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<section ng-init="tab=3">
  <ul>
    <li ng-class="{active:tab===1}">
      <a href ng-click="tab=1">1111111111</a>
    </li>
    <li ng-class="{active:tab===2}">
      <a href ng-click="tab=2">2222222222</a>
    </li>
    <li ng-class="{active:tab===3}">
      <a href ng-click="tab=3">33333333333</a>
    </li>
  </ul>
  <!--是否點(diǎn)擊-->
  {{tab===1}}
  {{tab===2}}
  {{tab===3}}
  <div class="panel" ng-show="tab===1">
    <h2>我是1111111111111111111111</h2>
  </div>
  <div class="panel" ng-show="tab===2">
    <h2>我是22222222222222222</h2>
  </div>
  <div class="panel" ng-if="tab===3">
    <h2>我是3333333333333333333333</h2>
  </div>
</section>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function () {
  });
</script>
</body>
</html>

運(yùn)行效果（直接在http://tools.jb51.net/code/HtmlJsRun上測(cè)試運(yùn)行）：

AngularJS如何實(shí)現(xiàn)標(biāo)簽頁(yè)tab選項(xiàng)卡切換功能

但ng-show和ng-if是有區(qū)別的

第一點(diǎn)區(qū)別是，

ng-if 在后面表達(dá)式為 true 的時(shí)候才創(chuàng)建這個(gè) dom 節(jié)點(diǎn)，
ng-show 是初始時(shí)就創(chuàng)建了，用display:block 和 display:none 來(lái)控制顯示和不顯示。

第二點(diǎn)區(qū)別是，

ng-if 會(huì)（隱式地）產(chǎn)生新作用域，ng-switch 、 ng-include 等會(huì)動(dòng)態(tài)創(chuàng)建一塊界面的也是如此。

這樣會(huì)導(dǎo)致，在 ng-if 中用基本變量綁定 ng-model，并在外層 div 中把此 model 綁定給另一個(gè)顯示區(qū)域，內(nèi)層改變時(shí)，外層不會(huì)同步改變，因?yàn)榇藭r(shí)已經(jīng)是兩個(gè)變量了。

<p>{{name}}</p>
<div ng-if="true">
  <input type="text" ng-model="name">
</div>

ng-show 不存在此問(wèn)題，因?yàn)樗蛔詭б患?jí)作用域。

避免這類問(wèn)題出現(xiàn)的辦法是，始終將頁(yè)面中的元素綁定到對(duì)象的屬性（data.x）而不是直接綁定到基本變量（x）上。AngularJS中的作用域

關(guān)于“AngularJS如何實(shí)現(xiàn)標(biāo)簽頁(yè)tab選項(xiàng)卡切換功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

名稱欄目：AngularJS如何實(shí)現(xiàn)標(biāo)簽頁(yè)tab選項(xiàng)卡切換功能
鏈接URL：http://m.rwnh.cn/article40/pedoho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、微信小程序、網(wǎng)站策劃、微信公眾號(hào)、企業(yè)建站、小程序開(kāi)發(fā)

聲明：本網(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í)需注明來(lái)源：創(chuàng)新互聯(lián)

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

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

AngularJS如何實(shí)現(xiàn)標(biāo)簽頁(yè)tab選項(xiàng)卡切換功能