asp.net夜话之十：复合控件和母板页（二）

asp.net夜话之十：复合控件和母板页（二）2011-03-05 csdn博客周金桥下面是一个用javascript来实现的选项卡式效果的例子，完全采用输出HTML代码的方式。在这个例子中我们通过css和div来控制当前活动选项卡和非活动选项卡的显示与否及显示样式，疑难部分笔者都做了详尽注释，读者朋友完全可以根据自己的实际需要把代码改造成自己想要的效果。

以下是设计部分代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaScriptMenu.aspx.cs" Inherits="JavaScriptMenu" %>
<！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>JavaScript实现的选项卡式效果</title>
<script language="javascript" type="text/javascript">
function Show_Sub（id_num,num,obj）
{
for（var i = 0;i <= 9;i++）
{
if（GetObj（"tabb" + id_num + i））
{
GetObj（"tabb" + id_num + i）.className = "guide2";
}
if（GetObj（"subb" + id_num + i））
{
GetObj（"subb" + id_num + i）.style.display = "none";
}
}
if（GetObj（"tabb" + id_num + num））
{
GetObj（"tabb" + id_num + num）.className = "guide1";
}
if（GetObj（"subb" + id_num + num））
{
GetObj（"subb" + id_num + num）.style.display = "block";
}
}
function GetObj（objName）
{
if（document.getElementById）
{
return eval（"document.getElementById（"" + objName + ""）"）;
}
else
{
return eval（"document.all." + objName）;
}
}
</script>
<style type="text/css">
.guide1 {
 cursor: hand;
 color: #003399;
 background-color:#3399FF;
 font-weight: bold;
 text-decoration: none;
 border-right: 1px solid #A2C0FE;
 height: 25px;
 line-height: 25px;
}
.guide2 {
 cursor: hand;
 border-right: 1px solid #A2C0FE;
 line-height: 25px;
}
.24line {line-height: 24px;}
.pad5 {padding:5px;}
.padtop2 {padding-top:2px;}
.padtop5 {padding-top:5px;}
.t {border-top: 1px solid #A2C0FE;}
.b {border-bottom: 1px solid #A2C0FE;}
.l {border-left: 1px solid #A2C0FE;}
.r {border-right: 1px solid #A2C0FE;}
.right{
 float:right;
 color: #999999;
 }
.left{
 float:left;
 color: #999999;
 }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<%=GetUserPanel（0） %>
</div>
</form>
</body>
</html>