VS2008(C#)制作网页Tab标签切换方法(二)

VS2008(C#)制作网页Tab标签切换方法(二)——JavaScript实现

 

使用JavaScript脚本代码,实现Tab标签切换

 

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

<!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>Tab的JavaScript实现</title>
    <style type="text/css">
        body
        {
            color: #000000;
            background-color: #ffffff;
            font-family: Tahoma, 宋体;
            font-size: 12px;
            margin: 0px;
            padding: 0px;
            text-align: center;
        }
        .sec1
        {
            background-color: #99ffcc;
        }
        .sec2
        {
            background-color: #ffcc33;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <%--
    遨游、IE8、360浏览器都兼容
    但是,FireFox、Chrome、Opera浏览器不支持
    --%>
    <center style="margin-top: 20px;">
        <table id="secTable" border="1" cellspacing="2" cellpadding="10" valign="middle"
            width="500px">
            <tr>
                <td class="sec2" onclick="secBoard(0)">
                    文学
                </td>
                <td class="sec1" onclick="secBoard(1)">
                    历史
                </td>
                <td class="sec1" onclick="secBoard(2)">
                    科技
                </td>
                <td class="sec1" onclick="secBoard(3)">
                    军事
                </td>
            </tr>
        </table>
        <table id="mainTable" class="main_tab" border="1" cellspacing="0" cellpadding="0"
            width="500px" style="height: 600px;">
            <tbody style="display: block;">
                <tr>
                    <td>
                        111-文学
                    </td>
                </tr>
            </tbody>
            <tbody style="display: none;">
                <tr>
                    <td>
                        222-历史
                    </td>
                </tr>
            </tbody>
            <tbody style="display: none;">
                <tr>
                    <td>
                        333-科技
                    </td>
                </tr>
            </tbody>
            <tbody style="display: none;">
                <tr>
                    <td>
                        444-军事
                    </td>
                </tr>
            </tbody>
        </table>

        <script type="text/javascript">
            function secBoard(n) {
                for (i = 0; i < secTable.cells.length; i++)
                    secTable.cells[i].className = "sec1";
                secTable.cells[n].className = "sec2";
                for (i = 0; i < mainTable.tBodies.length; i++)
                    mainTable.tBodies[i].style.display = "none";
                mainTable.tBodies[n].style.display = "block";
            }
        </script>
    </center>
    </form>
</body>
</html>

 

 

具体代码如上,源代码下载: VS2008(C#)4种方法实现Tab标签灵活切换源码,测试成功!

posted @ 2010-01-29 20:40  程序员天下  阅读(157)  评论(0编辑  收藏  举报