简单的Tab选项卡效果代码

作者: gaohailin 分类: 网站技术 发布时间: 2011-05-24 08:08

一个页面中如果有多个Tab选项卡以此格式:tabs0,tabs1,tabs2…


<style type="text/css">
.tabs{border:#ccc 1px solid;width:200px;background:#fff;}
.tabs ul{margin:0;padding:0;list-style:none;height:22px;background:#ddd;}
.tabs ul li{float:left;display:inline;padding:4px 10px 0;cursor:pointer;}
.tabs ul .li2{background:#fff;}
.tabs div{padding:5px;display:none;}
.tabs .main2{display:block;}
</style>


<div id="tabs0">
<ul id="tabs0_menu">
<li onclick="setTab(0,0)">博客</li>
<li onclick="setTab(0,1)">论坛</li>
<li onclick="setTab(0,2)">新闻</li>
</ul>
<div id="tabs0_main0">博客内容</div>
<div id="tabs0_main1">论坛内容</div>
<div id="tabs0_main2">新闻内容</div>
</div>


<script type="text/javascript">
function setTab(m,n){
var tabs_menu=document.getElementById("tabs"+m+"_menu").getElementsByTagName("li");
for(i=0;i<tabs_menu.length;i++){
tabs_menu[i].className=(i==n?"li2":"");
document.getElementById("tabs"+m+"_main"+i).style.display=(i==n?"block":"none");
}
}
</script>

 

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

2条评论
  • 芝麻哥

    2011 年 07 月 07 日 上午 9:05

    学习了一下哦 😛

  • New Orleans Saints Jerseys

    2011 年 12 月 12 日 上午 1:35

    Clearly, this content is often the best on this cherished field. My partner and i fit in any a conclusion and likewise can easily thirstily look ahead to the drawing near messages. Only telling thx is not going to really be sufficient, in the fantasti g lucidity inside of your posting. I’ll undoubtedly instantaneously grab ones own rss to stay smart of your improvements. Excellent job and even substantially achievement inside your business enterprise!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注