JQuery tab effect (separation of JS and HTML)_jquery

In actual application, as long as the integrity of the tab module structure code is ensured, N tabs of the same type can be added arbitrarily. There is no need to manually bind event handlers in HTML and add IDs to the content layer to be hidden.
Javascript (jquery) code is as follows:

Copy code The code is as follows:

< 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;
};
});

The CSS style code is as follows:

Copy code The code is as follows:

< ;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}

The HTML structure code is as follows:

Copy code The code is as follows:

No.1 Menu

• Label 1.1


• Label 1.2


• Label 1.3


• Label 1.4

infomation 1.1

< ;div class="layout">infomation 1.2

infomation 1.3

infomation 1.4

No.2 Menu

• Label 2.1


• Label 2.2< ;/li>
  
• Label 2.3


• Label 2.4

infomation 2.1

infomation 2.2

infomation 2.3

infomation 2.4