现在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，大家可以自己去试一试，有什么不懂的大家可以提出来，让我们一起学习、交流！