|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 |
<!DOCTYPE html><head><meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/> <title>网页选项卡应用</title> <script src="jquery-2.1.0.js"></script> <style type="text/css"> body { font-size:13px; } ul, li { margin :0; padding:0; list-style:none; } #menu li{ text-align:center; float:left; padding:5px; margin-right:2px; width:50px; cursor:pointer; } #menu li .tabFocus { width:50px; font-weight:bold; background-color:#f3f2e7; border:1px solid
#666; border-bottom:0; z-index:100; position:relative; } #content { width: 260px; height: 90px; padding: 10px; background-color:
#00ff21; clear: left; border: 1px solid
#666; position: relative; top:-1px; } #content li { display:none; } #content li .conFocus {display:block; } </style> <script type="text/javascript"> $(function
() { $("#menu li").each(function
(index) { $(this).click(function
() { $("#menu li .tabFocus").removeClass("tabFocus"); $("#content li:eq("
+ index + ")").show().siblings().hide(); }) }) }) </script></head><body> <ul id="menu"> <li class="tabFocus">家具</li> <li>电器</li> <li>二手</li> </ul> <ul id="content"> <li class="conFocus">我是家具的内容</li> <li>欢迎来到电器城</li> <li>二手市场，产品丰富多彩</li> </ul></body></html> |
原文：http://www.cnblogs.com/qianlovebeijixiong/p/3634776.html