實(shí)現(xiàn)思路是點(diǎn)擊上方的按鈕鸳碧，下方的內(nèi)容隨之發(fā)生改變骆撇，上方和下方用的是兩個(gè)div塊，是兄弟節(jié)點(diǎn)徘跪，所以需要讓tab按鈕和下方內(nèi)容一一對(duì)應(yīng)，例子是基予兩個(gè)模塊若下標(biāo)相同是一個(gè)內(nèi)容實(shí)現(xiàn)的琅攘，首先是HTML框架：
<div id="box">//包含tab按鈕和內(nèi)容的整體大框架
<div id="head_list"">//tab按鈕及內(nèi)容
<input type="button" value="菜單一" class="active"/>
<input type="button" value="菜單二" />
<input type="button" value="菜單三" />
<input type="button" value="菜單四" />
</div>
<div id="menu_content">//tab按鈕對(duì)應(yīng)的相應(yīng)內(nèi)容
<div style="display:block;">Hello,I am the first!</div>
<div style="display:none;">Hello,I am the seconed!</div>
<div style="display:none;">Hello,I am the third!</div>
<div style="display:none;">Hello,I am the forth!</div>
</div>
</div>1234567891011121314
在頁(yè)面加載完成時(shí)，會(huì)有一個(gè)初始的狀態(tài)松邪，顯示第一個(gè)按鈕和第一個(gè)按鈕對(duì)應(yīng)的內(nèi)容坞琴，所以這里我們需要給第一個(gè)按鈕添加一個(gè)樣式，至于顯示內(nèi)容在HTML結(jié)構(gòu)里用style=“display：block/none”已經(jīng)進(jìn)行了定義逗抑。
CSS樣式：
<style>
#box{
width:500px;
height: 400px;
background:lightgoldenrodyellow;
border:1px solid black;
}
#head_list input{//div是塊級(jí)元素剧辐，定義為float后在寬度允許的情況下，能在一行內(nèi)容納
float:left;
width:25%;
}
.active{//初始及點(diǎn)擊后的按鈕類(lèi)
color: cornflowerblue;
}
</style>1234567891011121314151617
最后是動(dòng)作的添加邮府，在切換時(shí)首先把樣式荧关，下方內(nèi)容全部去掉，然后為當(dāng)前按鈕添加樣式褂傀，顯示與當(dāng)前按鈕對(duì)應(yīng)的內(nèi)容：
<script>
var head_list = document.getElementById("head_list");
var menu_content = document.getElementById("menu_content");
var oli = head_list.getElementsByTagName("input");//獲取tab列表
var odiv = menu_content.getElementsByTagName("div");//獲取tab內(nèi)容列表
for(var i=0 ; i<oli.length ; i++){
oli[i].index = i;//定義index變量忍啤，以便讓tab按鈕和tab內(nèi)容相互對(duì)應(yīng)
oli[i].onclick = function( ){//移除全部tab樣式和tab內(nèi)容
for(var i =0; i < oli.length; i++){
oli[i].className = "";
odiv[i].style.display = "none";
}
this.className = "active";//為當(dāng)前tab添加樣式
odiv[this.index].style.display="block";//顯示當(dāng)前tab對(duì)應(yīng)的內(nèi)容
}
}
</script>
