在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加n个同类选项卡，不需要手动在html里绑定事件处理程序以及给要隐藏显示的内容层添加id。
javascript（jquery）代码如下：
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("ul.menu li:first-child").addclass("current");
$("div.content").find("div.layout:not(:first-child)").hide();
$("div.content div.layout").attr("id", function(){return idnumber("no")+ $("div.content div.layout").index(this)});
$("ul.menu li").click(function(){
var c = $("ul.menu li");
var index = c.index(this);
var p = idnumber("no");
show(c,index,p);
});
function show(controlmenu,num,prefix){
var content= prefix + num;
$('#'+content).siblings().hide();
$('#'+content).show();
controlmenu.eq(num).addclass("current").siblings().removeclass("current");
};
function idnumber(prefix){
var idnum = prefix;
return idnum;
};
});
</script>
css样式代码如下：
<style type="text/css">
* {margin:0; padding:0}
ul,li { list-style:none}
.box {width:450px; height:150px; border:1px solid #ccc; margin:10px; font-size:12px; font-family:verdana, arial, helvetica, sans-serif}
.tagmenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999}
.tagmenu h2 {font-size:12px; padding-left:10px;}
.tagmenu ul {position:absolute; left:100px; bottom:-1px; height:26px;}
ul.menu li {float:left; margin-bottom:1px; line-height:16px; height:14px; margin:5px 0 0 -1px; border-left:1px solid #999; text-align:center; padding:0 12px; cursor:pointer}
ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0}
.content { padding:10px}
</style>
html结构代码如下：
<body>
<div class="box">
<div class="tagmenu">
<h2>no.1 menu</h2>
<ul class="menu">
<li>label 1.1</li>
<li>label 1.2</li>
<li>label 1.3</li>
<li>label 1.4</li>
</ul>
</div>
<div class="content">
<div class="layout">infomation 1.1</div>
<div class="layout">infomation 1.2</div>
<div class="layout">infomation 1.3</div>
<div class="layout">infomation 1.4</div>
</div>
</div>
<div class="box">
<div class="tagmenu">
<h2>no.2 menu</h2>
<ul class="menu">
<li>label 2.1</li>
<li>label 2.2</li>
<li>label 2.3</li>
<li>label 2.4</li>
</ul>
</div>
<div class="content">
<div class="layout">infomation 2.1</div>
<div class="layout">infomation 2.2</div>
<div class="layout">infomation 2.3</div>
<div class="layout">infomation 2.4</div>
</div>
</div>
</body>
更多jquery 选项卡效果(js与html的分离)。