1 # !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 # <html xmlns="http://www.w3.org/1999/xhtml">
3 # <head>
4 # <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 # <style>
6 # #menu ul li{display:inline;}
7 # .on {color:red;}
8 # .off {color:blue;}
9 # #list_new2{display:none;}
10 # </style>
11 # <script src="http://www.google.com/jsapi"></script>
12 # <script>google.load("jquery", "1");</script>
13 # </head>
14 # <body>
15 #
16 #
17 # <div id="menu">
18 # <ul><li id="new1" class="on">标签1</li> <li id="new2" class="off">标签2</li></ul>
19 # </div>
20 #
21 # <div id="list_new1">
22 # <ul>
23 # <li>标签1</li>
24 # <li>标签1</li>
25 # </ul>
26 # </div>
27 # <div id="list_new2">
28 # <ul>
29 # <li>标签2</li>
30 # <li>标签2</li>
31 # </ul>
32 # </div>
33 #
34 #
35 # <script type="text/javascript">
36 # <!--
37 # $("#menu li").click(function()
38 # {
39 # $("#menu li").each(function()
40 # {
41 # $(this).removeClass("on");
42 # $(this).addClass("off");
43 # $("#list_"+$(this).attr("id")).hide();
44 # });
45 # $(this).removeClass("off");
46 # $(this).addClass("on");
47 # $("#list_"+$(this).attr("id")).show();
48 # }
49 # );
50 # //-->
51 # </script>
52 # </body>
53 # </html>