下面是一個用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>
