//jQ版本
$(function(){
var _tab=$('ul.tabnav>li');//獲取選項(xiàng)卡導(dǎo)航
var _box=$('.tabbox div');//獲取內(nèi)容切換區(qū)
var _hover='hover';//當(dāng)前點(diǎn)擊顯示的樣式
var _index;//索引值
_tab.eq(0).addClass(_hover);//第一個(gè)導(dǎo)航高亮顯示
_tab.click(function(){
_index=_tab.index(this);//獲取當(dāng)前點(diǎn)擊的索引值
$(this).addClass(_hover).siblings().removeClass(_hover);//當(dāng)前點(diǎn)擊高亮顯示
_box.eq(_index).show().siblings().hide();//通過索引值讓對(duì)應(yīng)的選項(xiàng)內(nèi)容區(qū)顯示
}).eq(0).click();
});

window.onload=function(){
var tabnav=document.getElementById('tabnav');
var list=tabnav.getElementsByTagName('li');
var tabbox=document.getElementById('tabbox');
var divs=tabbox.getElementsByTagName('div');
var hover='hover';//當(dāng)前點(diǎn)擊顯示的樣式
var indexValue=function(self,obj){//獲取索引值的函數(shù),通過它獲取當(dāng)前點(diǎn)擊在導(dǎo)航中的索引位置
for(var i=0;i<obj.length;i++){
if(obj[i]==self) return i;
}
};
var index;
list[0].className=hover;//第一個(gè)默認(rèn)高亮,建議在頁(yè)面中直接定義
for(var k=1;k<divs.length;k++){//我為了省事,用一個(gè)for循環(huán)定義默認(rèn)顯示第一個(gè)切換區(qū)塊,其他隱藏.這個(gè)最好用CSS定義,能避免頁(yè)面加載時(shí)它全部顯示出來.
divs[k].style.display='none';
}
for(var l=0;l<list.length;l++){//點(diǎn)擊事件
list[l].onclick=function(){
index=indexValue(this,list);//利用前面定義的indexValue函數(shù)取當(dāng)前點(diǎn)擊在選項(xiàng)導(dǎo)航中的索引值,
for(var m=0;m<list.length;m++){
list[m].className= (m==index) ? hover : '';//高亮顯示點(diǎn)擊項(xiàng)并移除其他項(xiàng)高亮
}
for(var n=0;n<divs.length;n++){
divs[n].style.display= (n==index) ? 'block' : 'none';//顯示點(diǎn)擊對(duì)應(yīng)的選項(xiàng)區(qū),隱藏其他
}
}
}
}