html tab 切换不请求,js 实现html tab切换

ul,li,div

{padding:0;margin:0;}

ul li

{float:left;width:100px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:1px

#bbb solid;border-bottom:none;}

ul li.fli

{background-color:#ccc;color:red;}

ul

{overflow:hidden;zoom:1;list-style-type:none;}

#tab_con

{width:304px;height:200px;}

#tab_con div

{width:304px;height:200px;display:none;border:1px #bbb

solid;border-top:none;}

#tab_con div.fdiv

{display:block;background-color:#ccc;}

id="tab">

class="fli">tab1

tab2tab3

id="tab_con">

class="fdiv">aaaa

bbbb

cccc

JS代码：易闻网

var

tabs=document.getElementByIdx_x("tab").getElementsByTagName_r("li");

var

divs=document.getElementByIdx_x("tab_con").getElementsByTagName_r("div");

for(var

i=0;i

tabs[i].οnclick=function(){change(this);}

}

function change(obj){

for(var

i=0;i

{

if(tabs[i]==obj){

tabs[i].className="fli";

divs[i].className="fdiv";

}

else{

tabs[i].className="";

divs[i].className="";

}

}

}

结果显示：易闻网