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