Javascript隐藏/显示图层答案

【问题标题】：Javascript hide/show layersJavascript隐藏/显示图层
【发布时间】：2011-03-16 15:38:41
【问题描述】：

我正在使用 javascript 隐藏和显示 div，基本上我想显示一个 div，然后当单击按钮时隐藏该 div 并显示另一个。我不能完全弄清楚这里的 javascript 是我目前拥有的，但是当我点击隐藏时第二层没有显示。

  <script language=javascript type='text/javascript'> 
    function hidediv() { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('layer').style.visibility = 'hidden'; 
    document.getElementById('topbar').style.visibility = 'visisble';
    } 
    else { 
    if (document.layers) { // Netscape 4 
    document.layer.visibility = 'hidden'; 
    document.topbar.visibility = 'visible'; 

    } 
    else { // IE 4 
    document.all.layer.style.visibility = 'hidden'; 
    document.all.topbar.style.visibility = 'visible'; 
    } 
    } 
    }

    function showdiv() { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('layer').style.visibility = 'visible'; 
 document.getElementById('topbar').style.visibility = 'hidden';
    } 
    else { 
    if (document.layers) { // Netscape 4 
    document.layer.visibility = 'visible'; 
document.topbar.visibility = 'hidden'; 
    } 
    else { // IE 4 
    document.all.layer.style.visibility = 'visible'; 
document.all.topbar.style.visibility = 'hidden';
    } 
    } 
    } 
    </script>

和css：

 #topbar {
    background-image: url(images/back.png);
background-repeat: repeat;
height: 30px;
margin-top: 20px;
visibility: hidden;
}

#show {
    float: right;
    padding-right: 40px;
    padding-top: 10px;
}

#hide {
    float: right;
    padding-right: 40px;
}

#layer {
background-image: url(images/back.png);
background-repeat: repeat;
padding-left: 20px;
padding-bottom:20px;
overflow: auto;
}

使用标准的 html 链接，例如：

<a href="javascript:hidediv()">Hide</a>

任何帮助将不胜感激，干杯！

编辑

好的切换到全新的东西，但隐藏后似乎不显示

<script type="text/javascript">

$(函数(){ $('#showhide').click(function(){ $('#layer').toggle(); $('#topbar').toggle(); }); });

和

<a href="javascript:void(0);" id="showhide">Show/Hide</a>

和

<div id="layer"></div>

【问题讨论】：

我强烈建议你使用 jQuery 来避免检查浏览器等的必要性。它肯定会缩短你的代码，让你更清晰，更容易调试。
遗憾的是，jquery 也不兼容 IE4。我建议不要支持这种旧浏览器。
我无法帮助您解决您的问题，但BBC's Glow library 似乎与老一代浏览器兼容。
@Amy IE4？ 1997年发布的Win 98？我很确定没有人再使用那个版本了。
yes iv 现在将代码更改为上面的代码，但在显示时遇到了小问题

标签： javascript html hide show layer

【解决方案1】：

你不需要 jQuery。

您的函数可能如下所示：

function hideElement(elementId)
{
 document.getElementById(elementId).style.display = 'none';
}
function showElement(elementId)
{
 document.getElementById(elementId).style.display = 'block';
}

然后在页面加载时，或者在 css 中你可以隐藏第一个 div。当点击发生时，您可以使用showElement 显示它。

【讨论】：

好的，这似乎是一个更好的方法，但我无法让它工作，可能做一些愚蠢的事情，检查上面的代码。

【解决方案2】：

这可能会对您有所帮助：http://api.jquery.com/hide/ 或 http://api.jquery.com/toggle/。

编辑：

希望下面的例子对你有所帮助。

<!DOCTYPE html>
<html>
<head>
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <script language="javascript" type="text/javascript">
  $(document).ready(function(){

    $("#button").click(function(){

         $("#a").toggle();
         $("#b").toggle();

     });

  });
  </script>
</head>
<body>
  <div id="a">
    I am a.
  </div>

  <div id="b" style="display: none">
  I am b.
  </div>

  <div id="button">
    <button>Show/Hide</button>
  </div>
</body>

</html>

【讨论】：

谢谢已经用 jquery 尝试了一些新的东西，但现在隐藏起来又很快又显示出来了，上面已经编辑过了。
请查看我添加到答案中的示例。我希望这会帮助你继续前进。