用表格实现选项卡效果

于 2010-08-22 17:15:00 发布
阅读量568 收藏
点赞数
分类专栏： js sample 文章标签： javascript border table class generator html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">

        .selectedTab
        {
            border-right: #ffd392 1px solid;
            border-top: #ffd392 1px solid;
            border-left: #ffd392 1px solid;
            border-bottom: #cacaca 0px solid;
            width: 120px;
            cursor: default;
        }
        .unselectedTab
        {
            border-right: #ffd392 1px solid;
            border-top: #ffd392 1px solid;
            border-left: #ffd392 1px solid;
            border-bottom: #ffd392 1px solid;
            width: 120px;
            cursor: pointer;
        }
        .tabPage
        {
            border-right: #ffd392 1px solid;
            border-top: none 0px solid;
            border-left: #ffd392 1px solid;
            border-bottom: #ffd392 1px solid;
        }

        .overplusTab
        {
            border-bottom: #ffd392 1px solid;
            width: auto;
        }
      
    </style>
</HEAD>

<BODY>
                   <input type="hidden" name="hdnSelectedTab" value="A" />
                <table width="770px" style="margin:5px 0 0 0" height="200" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <table border="0" style="background-image: url('Images/Main/right_biaotibj.gif');
                                border-top: #ffd392 1px solid; border-right: #ffd392 1px solid; font-weight: bold"
                                cellpadding="0" cellspacing="0" id="tabTitle" width="100%">
                                <tr>
                                    <td id="tabButtonA" height="25" align="center" οnclick="JavaScript:switchToTab('A')">
                                        IT技术
                                    </td>
                                    <td id="tabButtonB" align="center" οnclick="JavaScript:switchToTab('B')">
                                        金融企业
                                    </td>
                                    <td id="tabButtonC" align="center" οnclick="JavaScript:switchToTab('C')">
                                        销售
                                    </td>
                                    <td id="tabButtonD" align="center" οnclick="JavaScript:switchToTab('D')">
                                        制造
                                    </td>
                                    <td id="tabButtonE" align="center" οnclick="JavaScript:switchToTab('E')">
                                        行政管理
                                    </td>
                                    <td id="taboverplus" class="overplusTab">
                                        &nbsp;
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table width="100%" height="200" border="0" cellpadding="0" cellspacing="0" class="tabPage"
                                id="tabPageA">
                                <tr>
                                    <td align="center">
                                        tableA
                                    </td>
                                </tr>
                            </table>
                            <table width="100%" height="200" border="0" cellpadding="0" cellspacing="0" class="tabPage"
                                id="tabPageB">
                                <tr>
                                    <td align="center">
                                        tableB
                                    </td>
                                </tr>
                            </table>
                            <table width="100%" height="200" border="0" cellpadding="0" cellspacing="0" class="tabPage"
                                id="tabPageC">
                                <tr>
                                    <td align="center">
                                        tableC
                                    </td>
                                </tr>
                            </table>
                            <table width="100%" height="200" border="0" cellpadding="0" cellspacing="0" class="tabPage"
                                id="tabPageD">
                                <tr>
                                    <td align="center">
                                        tableD
                                    </td>
                                </tr>
                            </table>
                            <table width="100%" height="200" border="0" cellpadding="0" cellspacing="0" class="tabPage"
                                id="tabPageE">
                                <tr>
                                    <td align="center">
                                        tableE
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

                <script language="JavaScript" type="text/javascript">
                var prevTabName;
                var prevTabPage;
                var prevTabButton;
                var hdnSelectedTab;
                    var tabButtonA = document.all('tabButtonA');
                    var tabButtonB = document.all('tabButtonB');
                    var tabButtonC = document.all('tabButtonC');
                    var tabButtonD = document.all('tabButtonD');
                    var tabButtonE = document.all('tabButtonE');
                    var tabPageA = document.all('tabPageA');
                    var tabPageB = document.all('tabPageB');   
                    var tabPageC = document.all('tabPageC');   
                    var tabPageD = document.all('tabPageD');   
                    var tabPageE = document.all('tabPageE');   
                                   
                    tabPageA.style.display = 'none';
                    tabPageB.style.display = 'none';
                    tabPageC.style.display = 'none';
                    tabPageD.style.display = 'none';
                    tabPageE.style.display = 'none';
                    tabButtonA.className= 'unselectedTab';
                    tabButtonB.className= 'unselectedTab';
                    tabButtonC.className= 'unselectedTab';
                    tabButtonD.className= 'unselectedTab';
                    tabButtonE.className= 'unselectedTab';
                   
                    hdnSelectedTab = document.all("hdnSelectedTab");
                    prevTabName = hdnSelectedTab.value;
                    prevTabButton = document.all('tabButton' + prevTabName);
                    prevTabPage = document.all('tabPage' + prevTabName);   
                    prevTabButton.className = 'selectedTab';
                    prevTabPage.style.display = 'block';   
         
                function switchToTab(tabName)
                {
                    if (tabName != prevTabName)
                    {
                        prevTabPage.style.display = 'none';
                        prevTabButton.className = 'unselectedTab';
                       
                        prevTabName = tabName;
                        prevTabPage = document.all('tabPage' + tabName);
                        prevTabButton = document.all('tabButton' + tabName);
                       
                        prevTabPage.style.display = 'block';
                        prevTabButton.className = 'selectedTab';
                        hdnSelectedTab.value = tabName;
                    }
                    prevTabButton.blur();
                }
                </script>
</BODY>
</HTML>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值