在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。
Javascript（jquery）代码如下：
代码如下:
$(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;
};
});
CSS样式代码如下：
代码如下:
HTML结构代码如下：
代码如下:
No.1 Menu
Label 1.1 Label 1.2 Label 1.3 Label 1.4 infomation 1.1
infomation 1.2
infomation 1.3
infomation 1.4
No.2 Menu
Label 2.1 Label 2.2 Label 2.3 Label 2.4 infomation 2.1
infomation 2.2
infomation 2.3
infomation 2.4
