如何用js实现层的切换

如何用js实现层的切换

解决方案 »

  1.   

    获取层，设置层的z-index就可以了。
    没看懂具体要实现什么。
      

  2.   

    设置层的属性visibility=true/false就行了。。
      

  3.   

    要么使用z-index进行页面垂直设置显示层次。要不使用style去设置页面层的现实与隐藏。
      

  4.   


    <html>
    <head>
    <title>DIV层切换</title><script language="JavaScript" type="text/javascript"> 
    /*********************************************
    功能:    通用DIV切换函数
    参数:    divID --当前DIV的ID号；divName  --要改变的这一组DIV的命名前缀；zDivCount --这一组DIV的个数-1
    BY  :   JetKing 2007.06 
    http://www.80Boby.Com
    *********************************************/
    function ChangeDiv(divId,divName,zDivCount) 
    { 
     for(i=0;i<=zDivCount;i++)
     {
         document.getElementById(divName+i).style.display="none"; 
     }
     document.getElementById(divName+divId).style.display="block"; 
    } </script> 
    </head><body>
    层切换示例：<br>By:JetKing(www.80Boby.Com)<br>
    <span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)" style="cursor:hand;">内容一</span>
    <span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)" style="cursor:hand;">内容二</span>
    <span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2)" style="cursor:hand;">内容三</span>
    <div id="BigDIV" style="border:solid 1px #cccccc;width:460px;margin:10px;">
        <div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;">内容部分第一区<br><img src="http://www.80boby.com/images/common/water.gif"></div> 
        <div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第二区<br><img src="http://www.80boby.com/logo.gif"></div> 
        <div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第三区</div> 
    </div>
    </body>
    </html>
      

  5.   

    现写的一个，通过显示和隐藏。<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <title>DIV切换</title>
    <script language="javascript">
    $(function(){
    $("#_but").click(function(){
    $("#_div01").toggle();
    })
    });
    </script>
    </head>
    <body>
    <input id="_but" type="button" name="" value="click"  />
    <div id="_div01" style="display:none">万里长城</div>
    </body>
    </html>