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标签灵活切换源码，测试成功！