不一样的技术，一样的Tab页
前言：
都知道tab页，无非就是点击页面标签可以有选中对应的页面。
但是简简单单的功能或许会给我们带来更多的思考。当然可以使用不同的技术实现，下面就展示三种技术手段实现tab页面
技术是不一样的，但是思路是一样，正如，条条大路通罗马，不管那条路，最后都要通往罗马的。
目前整体的思路是写出所有显示的页面，再根据标签点击显示对应的标签
使用原生JavaScript实现tab的转换
HTML
<div class="main">
<div class="main">
<div class="nav" id="nav-list">
<ul>
<li class="active">菜单一 </li>
<li>菜单二 </li>
<li>菜单三 </li>
<li>菜单四 </li>
</ul>
</div>
<div id="con">
<div class="con" style="display:block">
<ul>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
<li>11111111111111111111</li>
</ul>
</div>
<div class="con">
<ul>
<li>222222222222222222222</li>
<li>222222222222222222222</li>
<li>222222222222222222222</li>
<li>222222222222222222222</li>
<li>222222222222222222222</li>
</ul>
</div>
<div class="con">
<ul>
<li>333333333333333333</li>
<li>333333333333333333</li>
<li>333333333333333333</li>
<li>333333333333333333</li>
<li>333333333333333333</li>
</ul>
</div>
<div class="con">
<ul>
<li>44444444444444444444</li>
<li>44444444444444444444</li>
<li>222222222222222222222</li>
<li>222222222222222222222</li>
<li>222222222222222222222</li>
</ul>
</div>
</div>
</div>
</div>
JS
window.onload=function(){
//获取nav标签数组
var nav=document.getElementById("nav-list").getElementsByTagName("li");
//获取显示页标签数组
var con=document.getElementById("con").getElementsByTagName("div");
//给每一个nav标签赋初始值，点击添加事件，
for(i=0;i<nav.length;i++){
//给每一个标签添加一个属性index，属性值是顺序名
nav[i].index = i;
console.log(nav[i].index);
nav[i].onclick=function(){
//把所有的标签的style都设置为none。class为空
for(var n = 0; n < con.length; n++) {
con[n].style.display = "none";
nav[n].className = "";
}
console.log(this.index);
console.log(this);
//给点击的那个标签的style添加为block，class为active；this代表的是点击的那个nav[i]
con[this.index].style.display = "block"
nav[this.index].className = "active";
}
}
}
CSS
.icon .nav{ height:30px;}
.nav li{ display:inline-block; width:100px; height:30px;line-height:30px; float:left; cursor:pointer; text-align:center;background:#ddd;}
.nav li.active{color:#fff;background:#f60}
.con{ display:none; padding-top:10px;}
思路：
- 总体的想法就是，不点击时默认的是所有display设置为none，在需要显示的页面上，手动添加为block，这样就为默认样式了。
- 当点击标签时，获取到标签值，找到相应的标签页，添加block，添加class
js实现的原理也是其他技术实现的原理
使用angularJS 实现tab标签页
前言：
angular 的精髓是在双向绑定，那也就可以使用双向绑定的特点来实现tab标签。
HTML
<div class= "tab-table-css" ng-controller="TabTableController as tab">
<!--标签页-->
<nav class="nav-list">
<ul>
<span class="set-up">设置</span>
<li ng-class="{active: tab.isSet(1)}" ng-click="tab.setContent(1)" ><span>节点信息</span></li>
<li ng-class="{active: tab.isSet(2)}" ng-click="tab.setContent(2)"><span>链接</span></li>
<li ng-class="{active: tab.isSet(3)}" ng-click="tab.setContent(3)"><span>背景信息</span></li>
<li ng-class="{active: tab.isSet(4)}" ng-click="tab.setContent(4)"><span>背景图片</span></li>
</ul>
</nav>
<!-- 内容页 -->
<div class="tab-content">
<section ng-show="tab.isSet(1)">
<p>1</p>
</section>
<section ng-show="tab.isSet(2)">
<p>222</p>
</section>
<section ng-show="tab.isSet(3)">
<p>333</p>
</section>
<section ng-show="tab.isSet(4)">
<p>4444</p>
</section>
</div>
</div>
标签上设置选中后的class 如果为true就显示为选中状态，其次是添加一个函数，点击后显示对应的标签页，
标签页，使用的是ng-show显示。
angularJS
var self = this;
//起始选中页
self.content = 1;
//设置选中的tab
self.setContent = function(tab){
self.content = tab;
self.active = true;
};
//显示对应的tab 返回的是布尔值
self.isSet = function(tab){
return self.content == tab;
};
果然还是angular最为简单，只不过不易维护
思路：为每个标签页设置一个函数，函数的参数已经给出，根据参数，来判断标签页的显示和标签的显示。较为合理。代码简单粗暴。
总结： 其实tab页的技术虽说不一样，但是整体的思路都是一样的，首先是默认的样式，点击后显示对应的页面和选中样式，去掉未选中的样式。也可以使用移除元素的做法，也可以试试的
