不一樣的技術(shù)，一樣的Tab頁(yè)
前言：
都知道tab頁(yè)，無(wú)非就是點(diǎn)擊頁(yè)面標(biāo)簽可以有選中對(duì)應(yīng)的頁(yè)面。
但是簡(jiǎn)簡(jiǎn)單單的功能或許會(huì)給我們帶來(lái)更多的思考。當(dāng)然可以使用不同的技術(shù)實(shí)現(xiàn)，下面就展示三種技術(shù)手段實(shí)現(xiàn)tab頁(yè)面
技術(shù)是不一樣的，但是思路是一樣，正如，條條大路通羅馬，不管那條路，最后都要通往羅馬的。
目前整體的思路是寫出所有顯示的頁(yè)面，再根據(jù)標(biāo)簽點(diǎn)擊顯示對(duì)應(yīng)的標(biāo)簽
使用原生JavaScript實(shí)現(xiàn)tab的轉(zhuǎn)換
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標(biāo)簽數(shù)組
var nav=document.getElementById("nav-list").getElementsByTagName("li");
//獲取顯示頁(yè)標(biāo)簽數(shù)組
var con=document.getElementById("con").getElementsByTagName("div");
//給每一個(gè)nav標(biāo)簽賦初始值，點(diǎn)擊添加事件，
for(i=0;i<nav.length;i++){
//給每一個(gè)標(biāo)簽添加一個(gè)屬性index，屬性值是順序名
nav[i].index = i;
console.log(nav[i].index);
nav[i].onclick=function(){
//把所有的標(biāo)簽的style都設(shè)置為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);
//給點(diǎn)擊的那個(gè)標(biāo)簽的style添加為block，class為active；this代表的是點(diǎn)擊的那個(gè)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;}
思路：
- 總體的想法就是，不點(diǎn)擊時(shí)默認(rèn)的是所有display設(shè)置為none，在需要顯示的頁(yè)面上，手動(dòng)添加為block，這樣就為默認(rèn)樣式了。
- 當(dāng)點(diǎn)擊標(biāo)簽時(shí)，獲取到標(biāo)簽值，找到相應(yīng)的標(biāo)簽頁(yè)，添加block，添加class
js實(shí)現(xiàn)的原理也是其他技術(shù)實(shí)現(xiàn)的原理
使用angularJS 實(shí)現(xiàn)tab標(biāo)簽頁(yè)
前言：
angular 的精髓是在雙向綁定，那也就可以使用雙向綁定的特點(diǎn)來(lái)實(shí)現(xiàn)tab標(biāo)簽。
HTML
<div class= "tab-table-css" ng-controller="TabTableController as tab">
<!--標(biāo)簽頁(yè)-->
<nav class="nav-list">
<ul>
<span class="set-up">設(shè)置</span>
<li ng-class="{active: tab.isSet(1)}" ng-click="tab.setContent(1)" ><span>節(jié)點(diǎn)信息</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>
<!-- 內(nèi)容頁(yè) -->
<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>
標(biāo)簽上設(shè)置選中后的class 如果為true就顯示為選中狀態(tài)，其次是添加一個(gè)函數(shù)，點(diǎn)擊后顯示對(duì)應(yīng)的標(biāo)簽頁(yè)，
標(biāo)簽頁(yè)，使用的是ng-show顯示。
angularJS
var self = this;
//起始選中頁(yè)
self.content = 1;
//設(shè)置選中的tab
self.setContent = function(tab){
self.content = tab;
self.active = true;
};
//顯示對(duì)應(yīng)的tab 返回的是布爾值
self.isSet = function(tab){
return self.content == tab;
};
果然還是angular最為簡(jiǎn)單，只不過(guò)不易維護(hù)
思路：為每個(gè)標(biāo)簽頁(yè)設(shè)置一個(gè)函數(shù)，函數(shù)的參數(shù)已經(jīng)給出，根據(jù)參數(shù)，來(lái)判斷標(biāo)簽頁(yè)的顯示和標(biāo)簽的顯示。較為合理。代碼簡(jiǎn)單粗暴。
總結(jié)： 其實(shí)tab頁(yè)的技術(shù)雖說(shuō)不一樣，但是整體的思路都是一樣的，首先是默認(rèn)的樣式，點(diǎn)擊后顯示對(duì)應(yīng)的頁(yè)面和選中樣式，去掉未選中的樣式。也可以使用移除元素的做法，也可以試試的
