zoukankan      html  css  js  c++  java

  • 利用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类库里ListView的一个BUG
    获取lable的caption， 摘抄还未测试可用否
    (转) lua实现split的简易方法
    2. SharePoint Online 开发，请联系qq512800530。加好备注。（不要发站内信。。。）
    1. android
    开发人员应关注的20个jQuery网站/博客
    Temp
    彩票项目开发节项
    求android ble 解决方案！
    自己开发的工作流引擎
  • 原文地址：https://www.cnblogs.com/publicbill/p/443080.html
Copyright © 2011-2022 走看看