代码
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 <title></title>
6 <link rel="stylesheet" href="style/enter.css" type="text/css" />
7 <style type="text/css">
8 .cur{color:red;border-bottom:2px solid green;background:blue;}
9 #ngame{
10 width:500px;
11 }
12 #tri{
13 width:500px;
14 background:#f1f1f1;
15 margin:0;
16 padding:0;
17 cursor:pointer;
18 }
19 #tri li{
20 float:left;
21 font-size:12px;
22 padding:2px;
23 margin-right:10px;
24 color:#000;
25 }
26 #game_con{
27 width:498px;
28 height:80px;
29 border:1px solid #f1f1f1;
30 font-size:14px;
31 }
32 #game_con div ul{
33 margin:0;
34 padding:0;
35 list-style-type:none;
36 font-size:14px;
37 }
38 </style>
39 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
40 <script type="text/javascript">
41 //http://www.javaeye.com/topic/578321
42 //http://blog.sina.com.cn/s/blog_54d256cc0100epcm.html
43 //tab("#tri","li","#game_con","div","click");
44 //tab(".tab_con","li",".tab_con","table");
45 //用类作为选择符虽然效率低点但是 可以多次重用 这个性质不错
46 //tab("#tzxu","li","#tzxn","div");
47 //不过最好还是用ID来做选择符 那效率高点
48 //tab("#vtag","li","#vtagn","ul");
49
50
51 function cur(ele){
52 $(ele).addClass("cur").siblings().removeClass("cur");
53 }
54 function tab(id_tab,tag_tab,id_con,tag_con,act){
55 $(id_tab).find(tag_tab).eq(0).addClass("cur");
56 $(id_con).find(tag_con).eq(0).show().siblings(tag_con).hide();
57 if(!act){ act="click"};
58 if(act=="click"){
59 $(id_tab).find(tag_tab).each(function(i){
60 $(id_tab).find(tag_tab).eq(i).click(function(){
61 cur(this);
62 $(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
63 })
64 })
65 }
66 if(act=="mouseover"){
67 $(id_tab).find(tag_tab).each(function(i){
68 $(id_tab).find(tag_tab).eq(i).mouseover(function(){
69 cur(this);
70 $(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
71 })
72 })
73 }
74 }
75 $(document).ready(function(){
76 tab("#tri","li","#game_con","div","click");
77 });
78 </script>
79 </head>
80 <body>
81 <div class="ngame">
82 <ul id="tri">
83 <li>射手榜</li>
84 <li>助攻榜</li>
85 <li>红黄榜</li>
86 </ul>
87 <div id="game_con">
88 <div>
89 <ul><li>·内容11111111</li></ul>
90 </div>
91 <div>
92 内容222222
93 </div>
94 <div>
95 内容333333
96 </div>
97 </div>
98 </div>
99 </body>
100 </html>
101
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title></title>
6 <link rel="stylesheet" href="style/enter.css" type="text/css" />
7 <style type="text/css">
8 .cur{color:red;border-bottom:2px solid green;background:blue;}
9 #ngame{
10 width:500px;
11 }
12 #tri{
13 width:500px;
14 background:#f1f1f1;
15 margin:0;
16 padding:0;
17 cursor:pointer;
18 }
19 #tri li{
20 float:left;
21 font-size:12px;
22 padding:2px;
23 margin-right:10px;
24 color:#000;
25 }
26 #game_con{
27 width:498px;
28 height:80px;
29 border:1px solid #f1f1f1;
30 font-size:14px;
31 }
32 #game_con div ul{
33 margin:0;
34 padding:0;
35 list-style-type:none;
36 font-size:14px;
37 }
38 </style>
39 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
40 <script type="text/javascript">
41 //http://www.javaeye.com/topic/578321
42 //http://blog.sina.com.cn/s/blog_54d256cc0100epcm.html
43 //tab("#tri","li","#game_con","div","click");
44 //tab(".tab_con","li",".tab_con","table");
45 //用类作为选择符虽然效率低点但是 可以多次重用 这个性质不错
46 //tab("#tzxu","li","#tzxn","div");
47 //不过最好还是用ID来做选择符 那效率高点
48 //tab("#vtag","li","#vtagn","ul");
49
50
51 function cur(ele){
52 $(ele).addClass("cur").siblings().removeClass("cur");
53 }
54 function tab(id_tab,tag_tab,id_con,tag_con,act){
55 $(id_tab).find(tag_tab).eq(0).addClass("cur");
56 $(id_con).find(tag_con).eq(0).show().siblings(tag_con).hide();
57 if(!act){ act="click"};
58 if(act=="click"){
59 $(id_tab).find(tag_tab).each(function(i){
60 $(id_tab).find(tag_tab).eq(i).click(function(){
61 cur(this);
62 $(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
63 })
64 })
65 }
66 if(act=="mouseover"){
67 $(id_tab).find(tag_tab).each(function(i){
68 $(id_tab).find(tag_tab).eq(i).mouseover(function(){
69 cur(this);
70 $(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
71 })
72 })
73 }
74 }
75 $(document).ready(function(){
76 tab("#tri","li","#game_con","div","click");
77 });
78 </script>
79 </head>
80 <body>
81 <div class="ngame">
82 <ul id="tri">
83 <li>射手榜</li>
84 <li>助攻榜</li>
85 <li>红黄榜</li>
86 </ul>
87 <div id="game_con">
88 <div>
89 <ul><li>·内容11111111</li></ul>
90 </div>
91 <div>
92 内容222222
93 </div>
94 <div>
95 内容333333
96 </div>
97 </div>
98 </div>
99 </body>
100 </html>
101