jQuery + CSS 实现Tab分页功能

<div id="divTab" style="width:500px;">
    <table cellSpacing="0" cellPadding="0" width="100%" border="0">
        <tr>
            <td valign="bottom" align="left" width="100%">
                <UL class="tabs">
                    <LI class="tabspace">LI>
                    <LI id="tab1" onclick="TabSwitch('tab1')" class="selectedTab">卡品资源管理LI>

                    <LI class="tabspace">LI>
                    <LI id="tab2" onclick="TabSwitch('tab2')">渠道管理LI>

                    <LI class="tabspace">LI>
                    <LI id="tab3" onclick="TabSwitch('tab3')">酬金管理LI>
                UL>
            td>
        tr>

        <tr>
            <td id="tabContent" height="300" align="center">
                卡品资源管理
            td>
       tr>
    table>
div>

"javascript">
    function TabSwitch(selectedTab){
        //1、找ID为divTab的元素；2、找className为tabs的所有LI元素（排除className为tabspace的LI元素）；3、清除所有class
        jQuery("#divTab .tabs LI[class!='tabspace']").removeClass();

        //为当前选中的tab设置class
        jQuery("#"+selectedTab).addClass("selectedTab");

        //取得当前选中tab里的文本内容
         var tabText = jQuery("#"+selectedTab).text();

        //当tab改变时，相应的内容也跟着改变
         jQuery("#tabContent").empty();
        jQuery("#tabContent").append(tabText);
    }

 实例源代码：
   

• tabs.rar (17.3 KB)