• 利用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前的状态将会完全丢失。
  • 相关阅读:
    .net core 3.1 使用Redis缓存
    JavaSE 高级 第11节 缓冲输入输出字节流
    JavaSE 高级 第10节 字节数组输出流ByteArrayOutputStream
    JavaSE 高级 第09节 字节数组输入流ByteArrayInputStream
    JavaSE 高级 第08节 文件输出流FileOutputStream
    JavaSE 高级 第07节 文件输入流FileInputStream
    JavaSE 高级 第06节 初识I、O流
    JavaSE 高级 第05节 日期类与格式化
    JavaSE 高级 第04节 StringBuffer类
    JavaSE 高级 第03节 Math类与猜数字游戏
  • 原文地址：https://www.cnblogs.com/publicbill/p/443080.html
Copyright © 2020-2023  润新知