基于JQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程 中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。
No.1 Menu
- Label 1.1
- Label 1.2
- Label 1.3
- Label 1.4
No.2 Menu
- Label 2.1
- Label 2.2
- Label 2.3
- Label 2.4
Javascript（jquery）代码如下：
1
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
2
$(document).ready(
function
(){
3
$(
"
ul.menu li:first-child
"
).addClass(
"
current
"
);
4
$(
"
div.content
"
).find(
"
div.layout:not(:first-child)
"
).hide();
5
$(
"
div.content div.layout
"
).attr(
"
id
"
,
function
(){
return
idNumber(
"
No
"
)
+
$(
"
div.content div.layout
"
).index(
this
)});
6
$(
"
ul.menu li
"
).click(
function
(){
7
var
c
=
$(
"
ul.menu li
"
);
8
var
index
=
c.index(
this
);
9
var
p
=
idNumber(
"
No
"
);
10
show(c,index,p);
11
});
12
13
function
show(controlMenu,num,prefix){
14
var
content
=
prefix
+
num;
15
$(
‘
#
‘
+
content).siblings().hide();
16
$(
‘
#
‘
+
content).show();
17
controlMenu.eq(num).addClass(
"
current
"
).siblings().removeClass(
"
current
"
);
18
};
19
20
function
idNumber(prefix){
21
var
idNum
=
prefix;
22
return
idNum;
23
};
24
});
25
<
/
script>
CSS样式代码如下：
1
<style type="text/css">
2
*
{
margin
:
0
;
padding
:
0
}
3
ul,li
{
list-style
:
none
}
4
.box
{
width
:
450px
;
height
:
150px
;
border
:
1px solid #ccc
;
margin
:
10px
;
font-size
:
12px
;
font-family
:
Verdana, Arial, Helvetica, sans-serif
}
5
.tagMenu
{
height
:
28px
;
line-height
:
28px
;
background
:
#efefef
;
position
:
relative
;
border-bottom
:
1px solid #999
}
6
.tagMenu h2
{
font-size
:
12px
;
padding-left
:
10px
;
}
7
.tagMenu ul
{
position
:
absolute
;
left
:
100px
;
bottom
:
-1px
;
height
:
26px
;
}
8
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
}
9
ul.menu li.current
{
border
:
1px solid #999
;
border-bottom
:
none
;
background
:
#fff
;
height
:
25px
;
line-height
:
26px
;
margin
:
0
}
10
.content
{
padding
:
10px
}
11
</style>
HTML结构代码如下：
1
<
body
>
2
<
div
class
="box"
>
3
<
div
class
="tagMenu"
>
4
<
h2
>
No.1 Menu
</
h2
>
5
<
ul
class
="menu"
>
6
<
li
>
Label 1.1
</
li
>
7
<
li
>
Label 1.2
</
li
>
8
<
li
>
Label 1.3
</
li
>
9
<
li
>
Label 1.4
</
li
>
10
</
ul
>
11
</
div
>
12
<
div
class
="content"
>
13
<
div
class
="layout"
>
infomation 1.1
</
div
>
14
<
div
class
="layout"
>
infomation 1.2
</
div
>
15
<
div
class
="layout"
>
infomation 1.3
</
div
>
16
<
div
class
="layout"
>
infomation 1.4
</
div
>
17
</
div
>
18
</
div
>
19
20
<
div
class
="box"
>
21
<
div
class
="tagMenu"
>
22
<
h2
>
No.2 Menu
</
h2
>
23
<
ul
class
="menu"
>
24
<
li
>
Label 2.1
</
li
>
25
<
li
>
Label 2.2
</
li
>
26
<
li
>
Label 2.3
</
li
>
27
<
li
>
Label 2.4
</
li
>
28
</
ul
>
29
</
div
>
30
<
div
class
="content"
>
31
<
div
class
="layout"
>
infomation 2.1
</
div
>
32
<
div
class
="layout"
>
infomation 2.2
</
div
>
33
<
div
class
="layout"
>
infomation 2.3
</
div
>
34
<
div
class
="layout"
>
infomation 2.4
</
div
>
35
</
div
>
36
</
div
>
37
</
body
>