在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。 Javascript(jquery)代码如下: 复制代码 代码如下: <BR>$(document).ready(function(){ <BR>$("ul.menu li:first-child").addClass("current"); <BR>$("div.content").find("div.layout:not(:first-child)").hide(); <BR>$("div.content div.layout").attr("id", function(){return idNumber("No")+ $("div.content div.layout").index(this)}); <BR>$("ul.menu li").click(function(){ <BR>var c = $("ul.menu li"); <BR>var index = c.index(this); <BR>var p = idNumber("No"); <BR>show(c,index,p); <BR>}); <BR>function show(controlMenu,num,prefix){ <BR>var content= prefix + num; <BR>$('#'+content).siblings().hide(); <BR>$('#'+content).show(); <BR>controlMenu.eq(num).addClass("current").siblings().removeClass("current"); <BR>}; <BR>function idNumber(prefix){ <BR>var idNum = prefix; <BR>return idNum; <BR>}; <BR>}); <BR> CSS样式代码如下: 复制代码 代码如下: <BR>* {margin:0; padding:0} <BR>ul,li { list-style:none} <BR>.box {width:450px; height:150px; border:1px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif} <BR>.tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999} <BR>.tagMenu h2 {font-size:12px; padding-left:10px;} <BR>.tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;} <BR>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} <BR>ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0} <BR>.content { padding:10px} <BR> 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