利用JavaScript制作网页中“选项卡”效果。 （二）

一个相对复杂一点的选项卡效果：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Tab</title>
<style type="text/css">
<!--
body {
    background-color: #999999;
}
.selectedTab { 
    BORDER-RIGHT: black 1px solid; 
    BORDER-TOP: black 1px solid; 
    BORDER-LEFT: black 1px solid; 
    BORDER-BOTTOM: #cacaca 0px solid; 
    BACKGROUND-COLOR: #cacaca; 
    height:32px; 
    width:120px; 
    cursor:default; 
}
.unselectedTab { 
    BORDER-RIGHT: black 1px solid; 
    BORDER-TOP: black 1px solid; 
    BORDER-LEFT: black 1px solid; 
    BORDER-BOTTOM: black 1px solid; 
    height:32px; 
    width:120px; 
    cursor:pointer;
}
.tabPage {
    BORDER-RIGHT: black 1px solid; 
    BORDER-TOP: none 0px solid; 
    BORDER-LEFT: black 1px solid; 
    BORDER-BOTTOM: black 1px solid; 
    BACKGROUND-COLOR: #cacaca
}
.spacingTab { 
    BORDER-BOTTOM: black 1px solid; 
    width:10px; 
}
.overplusTab { 
    BORDER-BOTTOM: black 1px solid; 
    width: auto; 
}
-->
</style>
<SCRIPT language="JavaScript">
<!--
var prevTabName;
var prevTabPage;
var prevTabButton;
var hdnSelectedTab;
function Init() {
    var tabButtonA = document.all('tabButtonA');
    var tabButtonB = document.all('tabButtonB');
    var tabPageA = document.all('tabPageA');
    var tabPageB = document.all('tabPageB');
    
    tabPageA.style.display = 'none';
    tabPageB.style.display = 'none';
    tabButtonA.className= 'unselectedTab';
    tabButtonB.className= 'unselectedTab';
    
    hdnSelectedTab = document.all("hdnSelectedTab");
    prevTabName = hdnSelectedTab.value;
    prevTabButton = document.all('tabButton' + prevTabName);
    prevTabPage = document.all('tabPage' + prevTabName);    
    prevTabButton.className = 'selectedTab';
    prevTabPage.style.display = 'block';    
}
function switchToTab(tabName)
{
    if (tabName != prevTabName)
    {
        prevTabPage.style.display = 'none';
        prevTabButton.className = 'unselectedTab';
        
        prevTabName = tabName;
        prevTabPage = document.all('tabPage' + tabName);
        prevTabButton = document.all('tabButton' + tabName);
        
        prevTabPage.style.display = 'block';
        prevTabButton.className = 'selectedTab';
        hdnSelectedTab.value = tabName;
    }
    prevTabButton.blur();
}
//-->
</SCRIPT>
</head>

<body onLoad="Init();">
<input type="hidden" name="hdnSelectedTab" value="A">
<table width="480" height="400" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" id="tabTitle" width="100%">
        <tr>
          <td id="tabButtonA" align="center" onClick="JavaScript:switchToTab('A')">tab A</td>
          <td id="tabSpacing" class="spacingTab">&nbsp;</td>
          <td id="tabButtonB" align="center" onClick="JavaScript:switchToTab('B')">tab B</td>
          <td id="taboverplus" class="overplusTab">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
    <table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" class="tabPage" id="tabPageA">
      <tr>
        <td align="center">tableA</td>
      </tr>
    </table>
    <table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" class="tabPage" id="tabPageB">
      <tr>
        <td align="center">tableB</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</body>
</html>

注：<input type="hidden" name="hdnSelectedTab" value="A">其实并不能真正解决页面Postback的问题，因为它跟<input type="text" 一样，value值在Postback后将丢失，不会被记忆，这也是WebApplication的老问题，不能记忆页面的状态。

要想真正解决此问题可以：
        1、在hidden控件后面加上 RunAt="server"，变成 .aspx文件，让 .net帮助我们去记忆；
        2、像ASP程序一样，用Request.Form() 再取回hidden控件的Value值。
        3、用其它方式，如 Session 等。。

总之： Web Page不会自己无条件的记忆原来的状态，同一个页面，在Postback前和后，虽然还是同一个页面，但Postback前的状态将会完全丢失。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/publicbill/p/443080.html