AngularJS怎么實(shí)現(xiàn)tab欄

這篇文章主要為大家展示了“AngularJS怎么實(shí)現(xiàn)tab欄”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“AngularJS怎么實(shí)現(xiàn)tab欄”這篇文章吧。

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站制作經(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è)讓你可以放心的選擇與我們合作。

tab欄:

代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Tab 標(biāo)簽</title> 
  <style> 
    body { 
      margin: 0; 
      padding: 0; 
      background-color: #F7F7F7; 
    } 
    .tabs { 
      width: 400px; 
      margin: 30px auto; 
      background-color: #FFF; 
      border: 1px solid #C0DCC0; 
      box-sizing: border-box; 
    } 
    img { 
      width: 400px; 
    } 
    .tabs nav { 
      height: 40px; 
      text-align: center; 
      line-height: 40px; 
      overflow: hidden; 
      background-color: #C0DCC0; 
      display: flex; 
    } 
    nav a { 
      display: block; 
      width: 100px; 
      border-right: 1px solid #FFF; 
      color: #000; 
      text-decoration: none; 
    } 
    nav a:last-child { 
      border-right: 0 none; 
    } 
    nav a.active { 
      background-color: #9BAF9B; 
    } 
    .cont { 
      overflow: hidden; 
      /*display: none;*/ 
    } 
    .cont ol { 
      line-height: 30px; 
    } 
    p { 
      text-align: center; 
      height: 30px; 
      line-height: 30px; 
    } 
    li { 
      list-style: none; 
      height: 30px; 
      line-height: 30px; 
    } 
  </style> 
  <!--[if lte IE 6]> 
  <![endif]--> 
</head> 
<body ng-app="Tabs"> 
  <div class="tabs" ng-controller="TabsController"> 
    <nav> 
    <!-- 指令之間沒有分號(hào) --> 
      <a href="javascript:;" ng-class="{active: type == 'local'}" ng-mouseover="switch('local')">白山茶</a> 
      <a href="javascript:;" ng-class="{active: type == 'global'}" ng-mouseover="switch('global')">作曲</a> 
      <a href="javascript:;" ng-class="{active: type == 'sports'}" ng-mouseover="switch('sports')">背景</a> 
      <a href="javascript:;" ng-class="{active: type == 'funny'}" ng-mouseover="switch('funny')">歌詞</a> 
    </nav> 
    <div ng-switch on="type"> 
      <section class="cont" ng-switch-when="local"> 
        <p>2017.5.24</p> 
      </section> 
      <section class="cont" ng-switch-when="global"> 
        <p>作曲：陳雪凝</p> 
        <p>作詞:陳雪凝</p> 
        <p>編曲:海藝音樂</p> 
      </section> 
      <section class="cont" ng-switch-when="sports"> 
          <img src="bsc.png"> 
      </section> 
      <section class="cont" ng-switch-when="funny"> 
        <ul> 
          <li>你認(rèn)真的說你喜歡白山茶</li> 
          <li>怡然自得的收起別的紅玫瑰</li> 
          <li>你溫柔的說你眷戀我</li> 
          <li>然后迫不及待的愛別人</li> 
          <li>然后迫不及待的愛別人</li> 
          <li>然后迫不及待的愛別人</li> 
          <li>然后迫不及待的愛別人</li> 
        </ol> 
      </section> 
    </div> 
  </div> 
  <script src="../../js/angular.min.js"></script> 
  <script> 
    angular.module('Tabs',[]).controller('TabsController',['$scope',function($scope){ 
       $scope.type = 'local'; 
       $scope.switch = function(type){ 
        $scope.type = type; 
       } 
    }]); 
  </script> 
</body> 
</html>

mvc小案例:

AngularJS怎么實(shí)現(xiàn)tab欄

代碼：

<!doctype html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Template ? TodoMVC</title> 
    <!-- <link rel="stylesheet" href="css/base.css"> --> 
    <link rel="stylesheet" href="css/index.css"> 
    <!-- CSS overrides - remove if you don't need it --> 
    <link rel="stylesheet" href="css/app.css"> 
  </head> 
  <body ng-app="Todos"> 
    <section class="todoapp" ng-controller="TodoController"> 
      <header class="header"> 
        <h2>todos</h2> 
        <form ng-submit="add()"> 
        <!-- 用戶輸入點(diǎn) --> 
          <input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus> 
        </form> 
      </header> 
      <section class="main"> 
        <input class="toggle-all" type="checkbox"> 
        <label for="toggle-all">Mark all as complete</label> 
        <ul class="todo-list"> 
          <li ng-repeat="(key,todo) in todos"> 
            <div class="view"> 
              <input type="checkbox" class="toggle" ng-click="done(key)" > 
              <label>{{todo.text}}</label> 
              <button class="destroy" ng-click="delete(todos,key)" ></button> 
            </div> 
            <input class="edit" value="Create a TodoMVC template"> 
          </li> 
          <li><h6>已完成</h6></li> 
          <li class="completed" ng-repeat="todo in doneTodos"> 
            <div class="view"> 
              <input class="toggle" type="checkbox" ng-checked="todo.flag" > 
              <label>{{todo.text}}</label> 
              <button class="destroy" ng-click="delete(doneTodos,key)"></button> 
            </div> 
            <input class="edit" value="Rule the web"> 
          </li> 
        </ul> 
      </section> 
      <footer class="footer"> 
        <span class="todo-count"><strong></strong> {{todos.length}} item left</span> 
        <button class="clear-completed">Clear completed</button> 
      </footer> 
    </section> 
    <footer class="info"> 
      <p>Double-click to edit a todo</p> 
      <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p> 
      <p>Created by <a href="http://todomvc.com">you</a></p> 
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p> 
    </footer> 
  </body> 
  <script src="../../js/angular.min.js"></script> 
  <script> 
    angular.module('Todos',[]).controller('TodoController',['$scope',function($scope){ 
      // 定義一個(gè)數(shù)組存儲(chǔ)用戶輸入的數(shù)據(jù) 
      $scope.todos = []; 
      $scope.doneTodos = []; 
      $scope.add = function(){ 
        $scope.todos.push({text:$scope.text,flag:false}); 
        $scope.text = ''; 
      } 
      $scope.done = function(key){ 
      var todo = $scope.todos.splice(key,1)[0]; 
      todo.flag = true; 
      $scope.doneTodos.push(todo); 
      // console.log($scope.todos.splice(key,1)); 
      } 
      $scope.delete = function(todos,key){ 
        todos.splice(key,1); 
      } 
    }]); 
  </script> 
</html>

以上是“AngularJS怎么實(shí)現(xiàn)tab欄”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：AngularJS怎么實(shí)現(xiàn)tab欄
當(dāng)前路徑：http://jinyejixie.com/article28/gpgdjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎ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)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

AngularJS怎么實(shí)現(xiàn)tab欄