关注前端开发
HTML5、CSS3、Javascript

一个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选项卡

分享: