jQuery + CSS 实现Tab分页功能

Html代码

1. <div id="divTab" style="width:500px;">  
2.     <table cellSpacing="0" cellPadding="0" width="100%" border="0">  
3.         <tr>  
4.             <td valign="bottom" align="left" width="100%">  
5.                 <UL class="tabs">  
6.                     <LI class="tabspace"></LI>  
7.                     <LI id="tab1" onclick="TabSwitch('tab1')" class="selectedTab">卡品资源管理</LI>  
8.                        
9.                     <LI class="tabspace"></LI>  
10.                     <LI id="tab2" onclick="TabSwitch('tab2')">渠道管理</LI>  
11.                        
12.                     <LI class="tabspace"></LI>  
13.                     <LI id="tab3" onclick="TabSwitch('tab3')">酬金管理</LI>  
14.                 </UL>  
15.             </td>  
16.         </tr>  
17.   
18.         <tr>  
19.             <td id="tabContent" height="300" align="center">  
20.                 卡品资源管理   
21.             </td>  
22.        </tr>  
23.     </table>  
24. </div>  

Js代码

1. <script language="javascript">   
2.     function TabSwitch(selectedTab){   
3.         //1、找ID为divTab的元素；2、找className为tabs的所有LI元素（排除className为tabspace的LI元素）；3、清除所有class   
4.         jQuery("#divTab .tabs LI[class!='tabspace']").removeClass();   
5.   
6.         //为当前选中的tab设置class   
7.         jQuery("#"+selectedTab).addClass("selectedTab");   
8.                    
9.         //取得当前选中tab里的文本内容   
10.          var tabText = jQuery("#"+selectedTab).text();   
11.                    
12.         //当tab改变时，相应的内容也跟着改变   
13.          jQuery("#tabContent").empty();   
14.         jQuery("#tabContent").append(tabText);   
15.     }   
16. </script>  

 实例源代码：
   

• tabs.rar (17.3 KB)