jqueryTab通用函数

代码

  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