用angular製做簡單的選項卡

時間 2019-11-10

原文原文鏈接

如今angular變得挺火熱的，本身也去簡單的學習了一下，學了幾天下來以爲angular果真好用，可是如今只是停留在比較淺的層面上，要想學好angular仍是得下一番功夫的。學了一點新知識就想和你們分享，今天就分享一個小小的Demo，但願你們都能喜歡。javascript

先給你們上靜態效果圖吧：html

點擊上面的標題能夠切換到相應的選項卡，接下來直接上代碼吧：java

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.1.5.6.js" ></script>//鏈接angular庫瀏覽器

　　//簡單樣式部分
       <style>
           #tab{display: flex;}
           #tab div{
               flex: 1;
               text-align: center;
               line-height: 40px;
               background: sandybrown;
               color: #fff;
               font-size: 18px;
               font-family: "微軟雅黑";
           }
           .list{
               flex: 1;
               height: 200px;
               border: 1px solid #ccc;
               border-top: none;
               line-height: 40px;
               text-align: center;
               padding: 20px;
               background: #F1F1F1;
           }
           .atv{
               border-bottom: 3px solid chocolate;
           }
       </style>app

//angular代碼部分
       <script>
           var app = angular.module('tabsApp',[]);//定義模塊
           app.controller('indexCtrl',function($scope){//定義控制器
               $scope.name = 'abc';
               $scope.page1 = true;
               $scope.page2 = false;
               $scope.page3 = false;
               $scope.show = function(page){
                   console.log(page);
                   if(page==1){
                       $scope.page1 = true;
                       $scope.page2 = false;
                       $scope.page3 = false;
                   }else if(page==2){
                       $scope.page1 = false;
                       $scope.page2 = true;
                       $scope.page3 = false;
                   }else if(page==3){
                       $scope.page1 = false;
                       $scope.page2 = false;
                       $scope.page3 = true;
                   }
               }
           });
       </script>
   </head>
   <body ng-app="tabsApp">//綁定模塊
       <div ng-controller="indexCtrl">//綁定控制器
           
           <div>
               <div id="tab">
                   <div ng-click="show(1)" class="{{page1?'atv':''}}">什麼是FOUC（無樣式內容閃爍）？你如何來避免FOUC？</div>
                   <div ng-click="show(2)" class="{{page2?'atv':''}}">doctype（文檔類型）的做用是什麼？你知道多少種文檔類型？</div>
                   <div ng-click="show(3)" class="{{page3?'atv':''}}">解釋下浮動和它的工做原理。</div>
               </div>
               <div ng-show="page1" class="list">
                   FOUC(Flash Of Unstyled Content)–文檔樣式閃爍
                   而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，
                   而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間
                   頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。解決方法簡單的出奇，
                   只要在之間加入一個或者script元素就能夠了。
               </div>
               <div ng-show="page2" class="list">
                   此標籤可告知瀏覽器文檔使用哪一種HTML或XHTML規範。該標籤可聲明三種DTD類型，
                   分別表示嚴格版本、過渡版本以及基於框架的HTML文檔。
                   HTML 4.01規定了三種文檔類型：Strict、Transitional以及Frameset。
                   XHTML 1.0規定了三種XML文檔類型：Strict、Transitional以及Frameset。
                   Standards（標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，
                   而Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。
               </div>
               <div ng-show="page3" class="list">
                   關於浮動咱們須要瞭解，浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
                   要想使元素浮動，必須爲元素設置一個寬度（width）。雖然浮動元素不是文檔流之中，
                   可是它浮動後所處的位置依然是在浮動以前的水平方向上。因爲浮動框不在文檔的普通流中，
                   因此文檔的普通流中的塊框表現得就像浮動框不存在同樣，下面的元素填補原來的位置。有些元素會在浮動元素的下方，
                   可是這些元素的內容並不必定會被浮動的元素所遮蓋，對內聯元素進行定位時，這些元素會考慮浮動元素的邊界，
                   會圍繞着浮動元素放置。也能夠把浮動元素想象成是被塊元素忽略的元素，而內聯元素會關注浮動元素的。
               </div>
           </div>
       </div>
   </body>
</html>

框架

就是這樣一個小的demo，你們能夠本身去試一試，有什麼不懂的你們能夠提出來，讓咱們一塊兒學習、交流！學習

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。