`
nanjingjiangbiao_T
  • 浏览: 2572858 次
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics