标签：
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 tab的插件 [1] [2]
标签：
原文地址：http://www.cnblogs.com/dream-bccb/p/4790182.html
