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>

 

<script language="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);
    }
</script>

CSS样式：
     看附件的代码

实例源代码：
   

 

评论

1 楼 lixianyi08 2008-12-12  

回帖是一种美德
感谢楼主 我先学习学习