tab選項卡，是一個非常常見的js展覽效果，前天幫一個同學做了幾個頁面，用到了這個功能，現在閒下來對它進行一點總結，希望對向我一樣的剛剛入門的初學者有一點幫助。
我們來想一下這個功能如何實現呢？
當鼠標點擊標頭時，下面相應的模塊會跟着動，他們是一個整體麼？其實並不是這樣的，我來說一下最簡單的原理：當你鼠標點擊時，觸發的效果是將非點擊的模塊display:none,點擊的模塊增加屬性display：block；
這樣一來就會讓非點擊的模塊消失。
好了，現在看來是不是很簡單呢？對，舉個簡單的例子，如下代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tabSwitchparent{
position:relative;
height:200px;
width:324px;
}
.tabSwitchparent div{
position:relative;
float:left;
}
.tabSwitchTarget{
width:324px;
height:100px;
display:none;
border: solid 1px #666666;
z-index:1;
top:0;
}
.tabSwitch{
z-index:2;
top:1px;
}
.tabSwitch .on{
border: solid 1px #666666;
border-bottom: none;
background-color:#ffffff;
}
//用來表現標頭被點擊的css樣式，本身的z軸偏移要比下面的模塊高，並且背景爲白，這樣纔可以把下面的border蓋上。
</style>
<script>
window.οnlοad=function(){
var tab1= document.getElementById("tabSwitch1");
var tab2=document.getElementById("tabSwitch2");
tab1.οnclick=function(){ document.getElementsByClassName("tabSwitchTarget")[0].style.display="block";//將tab1變display：block同時要把tab2變成none，消失這個一定要理解，如果不變，一輪點擊下來，兩個都有了display:block屬性，切記。
this.className="on";
tab2.className="";//這裏同理。
}
tab2.οnclick=function(){
document.getElementsByClassName("tabSwitchTarget")[0].style.display="none";
document.getElementsByClassName("tabSwitchTarget")[1].style.display="block";
this.className="on";
tab1.className="";
}
}//tab2 類似。
</script>
</head>
<body>
<div class="tabSwitchparent">
<div class="tabSwitch">
<div class="on" id="tabSwitch1">選項卡一</div>
<div id="tabSwitch2">選項卡二</div>
</div>
<div class="tabSwitchTarget" style="display:block;">內容一</div>
<div class="tabSwitchTarget">內容二</div>
</div>
</body>
</html這個就是最簡單的例子，效果如圖。
看到這裏，如果您覺得上面的那個例子很是幼稚的話，那麼您一定有了一定的水平。沒錯，上面的那個例子只是一個最簡單的原理展示，存在着很多的不足和缺點，下面我們一起來探討一下。
之所以前端的起點和入門很低，是表現它的語言很是通俗，甚至在一些程序帝眼中，html5的三門語言都不能稱爲語言。因此很多非計算機專業的同學一樣可以快速的適應這個還處於發展中的職業。但是，前端的中期和後期是一個非常漫長的過程，如果你接觸過其他高級的語言，那麼你會更好的領悟它，如果你沒有接觸過，那也沒有關係，每看到一個效果就去自己思考如果這個效果給你來寫，你要怎麼第一時間完成，第一時間容錯並使你的代碼看上去更加的清爽。
哈哈，以上是我的老師說過的一段話，共勉吧。
缺點：這裏的標頭只有“選項一”和“選項二”兩個，那麼如果有更對的分類，你還要每一個分類都用一個變量來去獲取麼？每一次的點擊，你都要完成這種笨重的改變display麼？
這個思想的轉變就是面向對象編程中的類的一種思想體現，把類似的東西抽象出來，寫成一個通用的方法，下回用的時候只要調用就好了！也是這種“懶人”的思想，纔出現了高效的jQuery！
這裏不用jQuery的方法，好了不囉嗦了，我寫了兩個函數來完成了這個功能，
function getTypeElement(es,type){
var eslen=es.length,
i= 0,
eArr=[],
esl=null;
for(;i<eslen;i++){
esl=es[i];
if(esl.nodeName.replace("#","").toLowerCase()==type){
eArr.push(esl);
}
}
return eArr;
}//獲取指定類型的節點來看看這個函數，有兩個參數，一個是要遍歷的節點的範圍性節點es，一般傳入一個節點數組，如es.childNodes。另一個是要查找的節點類型type。
if條件句裏面的那一長串又是幹什麼的呢？首先，你要了解nodeName這個方法會得到什麼。它會返回一個節點的名稱，如果是標籤，就返回標籤的名字，但是請注意（可以自己寫寫驗證），返回的這個String是大寫的標籤名字（如，li返回LI），還有如果標籤中間有text類型的東東（文本，空格，回車等），它會返回#text，爲了提升性能並保證這個函數更有一般性，加了一個replace來去#，加了一個toLowerCase()來變成小寫。
有了這個函數，就不用var 多個變量來操作了。
function tabSwitch(e){
var divs=getTypeElement(e.childNodes,"div"),
l=divs.length,
i=0;
for(;i<l;i++){
divs[i].onclick=function(){
for(var ii=0;ii<l;ii++){
divs[ii].className="";
document.getElementById("tabSwitch"+(ii+1)).style.display="none";
}
this.className="on";
document.getElementById(this.getAttribute("data-targent")).style.display="block";
}
}
}
tabSwitch(document.getElementById("tabSwitch"));
};這個函數，是用來“動”display的。基本思想，是每一次點擊，把所有的節點都遍歷設成display：none，之後在進行點擊者的改變。
好了，來看看整個代碼吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選項卡例子代碼</title>
<style>
.tabSwitchParent{
position:relative;
width:324px;
}
.tabSwitchParent div{
position:relative;
float:left;
}
.tabSwitchTarget{
display:none;
left:0;
top:0;
z-index:1;
width:324px;
height:54px;
padding:5px;
border:solid 1px #ccc;
color:#666;
}
#tabSwitch{
z-index: 2;
top:1px;
}
#tabSwitch{
font-size:15px;
margin:0;
text-align:center;
cursor:pointer;
}
#tabSwitch .on{
border:solid 1px #ccc;
border-bottom: none;
background-color:#fff;
}
</style>
<script>
window.οnlοad=function(){
function getTypeElement(es,type){
var eslen=es.length,
i= 0,
eArr=[],
esl=null;
for(;i<eslen;i++){
esl=es[i];
if(esl.nodeName.replace("#","").toLowerCase()==type){
eArr.push(esl);
}
}
return eArr;
}//獲取指定類型的節點
function tabSwitch(e){
var divs=getTypeElement(e.childNodes,"div"),
l=divs.length,
i=0;
for(;i<l;i++){
divs[i].οnclick=function(){
for(var ii=0;ii<l;ii++){
divs[ii].className="";
document.getElementById("tabSwitch"+(ii+1)).style.display="none";
}
this.className="on";
document.getElementById(this.getAttribute("data-targent")).style.display="block";
}
}
}
tabSwitch(document.getElementById("tabSwitch"));
};
</script>
</head>
<body>
<h2>Tab選項卡</h2>
<div class="tabSwitchParent">
<div id="tabSwitch">
<!---選項卡-->
<div data-targent='tabSwitch1' class="on">選項卡1</div>
<div data-targent='tabSwitch2'>選項卡2</div>
<div data-targent='tabSwitch3'>選項卡3</div>
</div>
<!---內容-->
<div class="tabSwitchTarget" style="display:block;color:#123323" id="tabSwitch1">選項卡1</div>
<div class="tabSwitchTarget" style="color:#123323" id="tabSwitch2">選項卡2</div>
<div class="tabSwitchTarget" style="color:#123323" id="tabSwitch3">選項卡3</div>
</div>
</body>
</html>雖然我覺得這個代碼並不是算法上最優的代碼（因爲這個每一次都要把所有的設爲none，應該會有更好的算法，待我想出了更新這篇文章。）但是這個代碼的可讀行和使用性很好，如果你要添加新的分類，加新的對應註釋下的div就行了。
（那個data-target是自定義屬性，用來二級控制的~~）。
以上代碼參考了一些資料，如《超實用的JavaScript代碼段》電子工業出版社，這本書挺好的，但可能有些地方不是很規範（感覺作者是後臺轉過來的，當然也可能是我水平不夠，推薦大家看看~~~~