比较实用的Tab标签

时间：2010-09-10 来源：程序诗人

兼容opera，chorme，ie，但是在firefox下面有些许缺憾。

见图：

代码如下：

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>FZPT系统的tab样式以及使用方法剖析</title>
    <style type="text/css">
    #tab
    {
        margin-bottom:4px;
        font-weight: normal;
        font-size: 12px;
        line-normal;
        font-style: normal;
        font-variant: normal;
    }
    #tab td
    {
        white-space: nowrap;
        padding:6px;
        padding-left:5px;
        padding-right:5px;
    }

    .tabLeft,.tabFocus,.tabNormal,.tabRight
    {
        border: 1px solid #C2C2C2;
        text-align:center;
    }

    .tabLeft
    {
        border-width:0px 0px 1px 0px;
        width:4px;
    }
    .tabFocus
    {
        border-width:3px 0px 0px 1px;
        border-top:3px  solid #FF9C00;
        cursor:hand;
        font:bold;
        white-space: nowrap;
        background:#FFEA97;
        filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#FFEA97, endcolorstr=#ffffff);
    }

    .tabNormal
    {
        border-width:1px 0px 1px 1px ;
        cursor:hand;
        white-space: nowrap;
        filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#EBEBDC, endcolorstr=#ffffff);
        color:#000000
    }
    .tabRight
    {
        border-width:0px 0px 1px 1px ;
    }


    </style>
    <script type="text/javascript">
        var selTabId = null;  //选中的tab的id设置为空
        var selTabParam = "0";
        var tabID ;
        var tableIDs;

        function initview() {
            tabID = new Array("tabxxb", "tabssb", "tabcpb", "tabcwb", "tabfdcb", "tabdcb");
            tableIDs = new Array("xs_table", "xs_table", "xs_table", "xs_table", "xs_table", "xs_table");
        }

        function showSelectedTab(idno) {
            selTabParam = idno;
            selTabId = tabID[idno];
            if (document.all(tabID[idno]).className == "tabNormal") {
                for (var i = 0; i < tabID.length; i++) {
                    document.all(tabID[i]).className = "tabNormal";
                    document.all(tableIDs[i]).style.display = "none";
                }
                document.all(tabID[idno]).className = "tabFocus";
                document.all(tableIDs[idno]).style.display = "block";
            }
        }

        function showSelectedTabCustomer1(bj) {
            if ("0" == bj) {
                document.getElementById("iframeMain").scr = "http://www.baidu.com";
            }
            if ("1" == bj) {
                document.getElementById("iframeMain").src = "http://www.google.com.hk"; ;
            }
            if ("2" == bj) {
                document.getElementById("iframeMain").src = "http://www.bing.com";
            }
            if ("3" == bj) {
                document.getElementById("iframeMain").src="http://www.cnblogs.com";
            }
            if ("4" == bj) {
                document.getElementById("iframeMain").src="http://www.csdn.net";
            }
            if ("5" == bj) {
                document.getElementById("iframeMain").src="http://www.51cto.com";
            }
            showSelectedTab(bj);
        }
    </script>
</head>
<body onload="initview();">
    <form id="form1" runat="server">

    <br />
    <br />
     <table id="tab" cellspacing="0" cellpadding="0" width="100%"  align="center" border="0">
        <tr>
            <td class="tabLeft" width="21px">

            </td>
            <td class="tabFocus" id="tabxxb" onclick="showSelectedTabCustomer1('0'); " width="60px">
                百度网站
            </td>
            <td class="tabNormal" id="tabssb" onclick="showSelectedTabCustomer1('1'); " width="60px">
                谷歌网站
            </td>
            <td class="tabNormal" id="tabcpb" onclick="showSelectedTabCustomer1('2'); " width="60px">
                微软搜索
            </td>
            <td class="tabNormal" id="tabcwb" onclick="showSelectedTabCustomer1('3'); " width="60px">
                博客园
            </td>
            <td class="tabNormal" id="tabfdcb" onclick="showSelectedTabCustomer1('4'); " width="60px">
                csdn
            </td>
            <td class="tabNormal" id="tabdcb" onclick="showSelectedTabCustomer1('5')" width="65px">
                51cto网站
            </td>
            <td class="tabRight">

            </td>
        </tr>
    </table>
    <div id="xs_table" style="width: 100%;">
        <table border="0" cellspacing="0" cellpadding="0" style="width: 100%">
            <tr>
                <td align="left" colspan="4" style="padding-left: 5px;">
                    <iframe id="iframeMain" name="mainManger" runat="server" width="100%" style="450px;" src=""
                        frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>