您的位置：首页 > 编程语言 > C#

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

2010-01-29 20:40 525 查看
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
.className = "sec2";
for (i = 0; i < mainTable.tBodies.length; i++)
mainTable.tBodies[i].style.display = "none";
mainTable.tBodies
.style.display = "block";
}
</script>
</center>
</form>
</body>
</html>

具体代码如上，源代码下载： VS2008（C#）4种方法实现Tab标签灵活切换源码，测试成功！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航