简单的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=utf8" />
 5 <title>tab</title>
 6 <script src="jquery.js" type="text/javascript"></script>
 7 
 8 <script language="javascript">
 9     $(document).ready(function(){
10         setTab('news');
11     });
12     function setTab(tab_id, show_index, tab_class, panel_class){
13         var $tabs = $('#' + tab_id + ' .tab_item');
14         var $panels = $('#' + tab_id + ' .panel_item');
15         
16         $tabs.each(function(index_tab){
17             $(this).click(function(){
18                 $tabs.removeClass('tab_active');
19                 $(this).addClass('tab_active');
20                 
21                 var now_tab_index = $tabs.index(this);
22                 $panels.removeClass('panel_active');
23                 $($panels[now_tab_index]).addClass('panel_active');
24                 
25                 /*$tabs.each(function(tab_index){
26                     if($(this).hasClass('active')){
27                         $panels.removeClass('active');
28                         $($panels[tab_index]).addClass('active');
29                     }
30                 });*/
31             });
32         });
33     }
34 </script>
35 </head>
36 
37 <body>
38 <style>
39     ul{margin:0; padding:0;}
40     li{ list-style: none; display: inline-block; }
41     .panel_item{display: none;}
42     .tab_active{display: inline-block; background: #cccccc;}
43     .panel_active{display: block;}
44 </style>
45 <div id="news">
46     <ul class="tab">
47         <li class="tab_item tab_active">tab1</li>
48         <li class="tab_item">tab2</li>
49         <li class="tab_item">tab3</li>
50     </ul>
51     <div class="panel">
52         <div class="panel_item panel_active">1</div>
53         <div class="panel_item">2</div>
54         <div class="panel_item">3</div>
55     </div>
56 </div>
57 </body>
58 </html>

 

jquery的index()函数使用 [1] [2]

其它jquery tab的插件 [1] [2]

posted on 2015-09-07 22:46  dream_bccb  阅读(201)  评论(0)    收藏  举报