关注前端开发
关注用户体验

一个js选项卡

.active{float:left;background:url(../images/join/1.jpg) no-repeat right top;display:block;width:110px;height:32px;line-height:32px;font-size:14px;color:#FFF;text-align:center;font-weight:bold;letter-spacing:2px;text-decoration:none;cursor:pointer;}

.normal{float:left;display:block;width:110px;height:22px;padding-top:10px;font-size:14px;color:#060;text-align:center;font-weight:bold;letter-spacing:1px;cursor:pointer;}

.none{display:none;}

<ul id=”T”>

<li onclick=”joinTT(this,0);”>00000000000</li>

<li onclick=”joinTT(this,1);”>11111111111</li>

</ul>

<div id=”T_T_0″>00000000000</div>

<div id=”T_T_1″>11111111111</div>

function joinTT(thisObj,Num){

if(thisObj.className == “active”)return;

var tabObj = thisObj.parentNode.id;

var tabList = document.getElementById(tabObj).getElementsByTagName(“li”);

for(i=0; i <tabList.length; i++)

{

if (i == Num)

{

thisObj.className = “active”;

document.getElementById(tabObj+”_T_”+i).style.display = “block”;

}else{

tabList[i].className = “normal”;

document.getElementById(tabObj+”_T_”+i).style.display = “none”;

}

}

}

未经允许不得转载:大前端 » 一个js选项卡
分享到: 更多 (0)

themebetter 国内更好的WordPress主题服务商

立即前往