简单的Tab选项卡效果代码

一个页面中如果有多个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>