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

一个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”;

}

}

}

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

评论 9

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #9

    Would love to perpetually get updated great blog ! .

    Nonton Anime2周前 (05-10)回复
  2. #8

    Hmm it seems like your website ate my first comment (it was super long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog blogger but I’m still new to everything. Do you have any tips and hints for novice blog writers? I’d certainly appreciate it.

    cat care3周前 (05-08)回复
  3. #7

    Keep up the wonderful work , I read few content on this site and I think that your blog is very interesting and contains sets of great info .

  4. #6

    That was done just to give a background story on Roy’s character.

    Marisa Cleath2个月前 (04-08)回复
  5. #5

    This is the perfect blog for anyone who would like to understand this topic. You know so much its almost tough to argue with you (not that I really would want to…HaHa). You certainly put a fresh spin on a subject that has been written about for many years. Wonderful stuff, just excellent!

    Apex Legends Season 12个月前 (03-31)回复
  6. #4

    Youre so cool! I dont suppose Ive read anything such as this just before. So nice to discover somebody with original thoughts on this subject. realy i appreciate you for beginning this up. this web site are some things that is required on-line, someone after some originality. helpful job for bringing new things on the internet!

    my singing monsters2个月前 (03-28)回复
  7. #3

    Hey this is kinda of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding experience so I wanted to get advice from someone with experience. Any help would be greatly appreciated!

    Shellie Spearman3个月前 (03-11)回复
  8. #2

    这个是jquery写的选项卡 http://www.haojb.cn/js/thread-18.html

    好脚本6年前 (2013-07-11)回复
  9. #1

    可以参考这个。是已经分装好的。这个是原生js的选项卡 http://www.haojb.cn/js/thread-87.html

    好脚本6年前 (2013-07-11)回复

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

立即前往