yardan

Weak men wait for opportunity, but the strong men make it.

一个很简单的用jquery做的tab切换[转]

 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>  

posted on 2008-11-22 10:39 YarDan 阅读(1596) 评论(0)  编辑 收藏 引用 网摘


只有注册用户登录后才能发表评论。
网站导航:
<2008年11月>
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456

导航

统计

公告

擅一艺微长,便算读书种子。

留言簿(1)

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜