关于层的问题

补充:不可以用绝对定位。我是把div放在单元格里面定位的。

解决方案 »

  1.   

    我有一个程序，可以参考以下：放在<head>中：
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }function MM_showHideLayers() { //v6.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
        obj.visibility=v; }
    }
    //-->
    </script>将以下个层放在单元格中：
    <div id="Layer3" style="position:absolute; width:100%; height:40px;  z-index:3; visibility: hidden;"> 
                             </div>
                <div id="Layer2" style="position:absolute; width:100%; height:40px; z-index:2; visibility: hidden;"> 
                   
                                   </div>
                <div id="Layer1" style="position:absolute; width:100%; height:40px;  z-index:1; visibility: hidden;"> 
                              </div>通过以下调用：
               <INPUT NAME="asd" TYPE="button" onClick="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer3','','hide')">
               <INPUT TYPE="button" NAME="asd" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer3','','hide')">
               <INPUT TYPE="button" NAME="asd" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','show')">
      

  2.   

    用visibility隐藏掉的内容仍然保留物理空间，其大小与其为可视时的物理空间相同。要让各个div“叠起来”得用divId.style.display="none"
      

  3.   

    to: emu(ston)我想知道可不可以把不显示的层不放在内存里面？？？？？
    因为我要用到的层很多我怕内存不够用。（物理空间是不是指内存？）
    display="none"是控制什么的？
      

  4.   

    element.style.display="none" 可以隐藏对象。
    想不放内存里面需要试用一些技巧，具体得看你想干什么，用什么方式干。
      

  5.   

    我想做一个页面左边是产品的列表,右边是选中产品的具体介绍.
    因为产品会有很多,所以叠在一起的产品介绍会也很多.
    我就怕那么多内容放在同一个htm里面读的时候内存会不足.
    请指点一下.
    (这个功能很重要的.)
      

  6.   

    具体会有多少呢？
    如果实在很多可以把选中产品的具体介绍延迟下载，也就是说在选中了产品之后再从服务器读取介绍信息。简单的就用iframe直接显示，也可以用其他办法读取数据之后写进当前页面，比较容易控制显示格式。
      

  7.   

    示范一下，实际操作的时候一般不用静态页面。主页面：test.html
    -----------------------------------------------
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>emu's test</title>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function show(v)
    {
    iframe1.location=v
    }
    //-->
    </SCRIPT>
    </head>
    <body bgcolor=#3399CC>
    <TABLE width=100%>
    <TR>
    <TD width=100>
    <select size=25 style="width:100;background-color:#3399CC;border-width=0" onclick="show(value)">
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    <option value="product1.html">产品1</option>
    <option value="product2.html">产品2</option>
    <option value="product3.html">产品3</option>
    </select>
    </TD>
    <TD>
    <iframe width=100% height=100% id=iframe1 src="product1.html"></iframe>
    </TD>
    </TR>
    </TABLE>
    </body>
    </html>
    -----------------------------------------------附加页面：product1.html-----------------------------------------------
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title></title>
    </head>
    <body bgcolor=#3399CC>
    <BR><BR><BR>
    <CENTER>产品一的介绍</CENTER>
    </body>
    </html>
    -----------------------------------------------附加页面：product2.html-----------------------------------------------
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title></title>
    </head>
    <body bgcolor=#3399CC>
    <BR><BR><BR>
    <CENTER>产品二的介绍</CENTER>
    </body>
    </html>
    -----------------------------------------------附加页面：product3.html-----------------------------------------------
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title></title>
    </head>
    <body bgcolor=#3399CC>
    <BR><BR><BR>
    <CENTER>产品三的介绍</CENTER>
    </body>
    </html>
    -----------------------------------------------
    把几个页面放在同一个目录下就行了。
      

  8.   

    这个方法我也想过。
    但是要求只能生成一个页面，所以
    但是还是thank you 非常 much~~~~~```
    如果有你解决的方法，麻烦再贴一下。
    再次thank you ~~~
      

  9.   

    如果是想把层重叠起来是肯定要用position:absolute来绝对定位的，如果是把用了绝对定位的话，该元素就不会受其它元素的限制了，它就是一个独立的元素了，所以是不能把一个绝对定位的元素放在一个单元格中的，这样你只能对这些层做整个页面的绝对定位了。
    如果你是想把产品放在单元格中的话我建议你利用tdID.innerHTML来改变那个要显示产品信息的单元格的HTML内容！
      

  10.   

    同意danky() 。
    只能用一个页面那就只有动态加载数据了，也就不是纯javascript能搞定的了，你用什么做服务程序？
    可是为什么只能用一个页面呢？多个页面是最简单直接的方法啊。我觉得你这样的问题没有必要用到那么复杂的技巧来解决。除非你需要管理很复杂的产品信息。
      

  11.   

    嗯，其实我也经常把要处理的数据放在页面的数组上（一般用jsp直接生成这个数组），然后从数组里面动态显示出来：
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>emu's test</title>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var ar = ["产品一介绍","产品二介绍","产品三介绍"]
    function show(i)
    {
    div1.innerHTML = ar[i];
    }
    //-->
    </SCRIPT>
    </head>
    <body onload="show(0)">
    <TABLE width=100%>
    <TR>
    <TD width=100>
    <select size=25 style="width:100" onclick="show(selectedIndex)">
    <option>产品1</option>
    <option>产品2</option>
    <option>产品3</option>
    </select>
    </TD>
    <TD>
    <div id=div1></div>
    </TD>
    </TR>
    </TABLE>
    </body>
    </html>