現在angular變得挺火熱的，自己也去簡單的學習了一下，學了幾天下來覺得angular果然好用，但是現在只是停留在比較淺的層面上，要想學好angular還是得下一番功夫的。學了一點新知識就想和大家分享，今天就分享一個小小的Demo，希望大家都能喜歡。
先給大家上靜態效果圖吧：
點擊上面的標題可以切換到相應的選項卡，接下來直接上代碼吧：
<!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>
//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">//綁定控制器
<!--<p>{{name}}</p>-->
<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，大家可以自己去試一試，有什么不懂的大家可以提出來，讓我們一起學習、交流！