Javascript隱藏/顯示圖層

Question

我正在隱藏和顯示javascript中的div，基本上我想顯示一個div，然后當點擊一個按鈕隱藏該div並顯示另一個。 我無法想象這里的javascript是我現在擁有的，但是當我點擊hide時第二層沒有顯示。

  <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">

$（function（）{$（'＃showhide'）。click（function（）{$（'＃layer'）。toggle（）; $（'＃topbar'）。toggle（）;}）;}）;

和

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

和

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

Answer 1

你不需要jQuery。

您的功能可能如下所示：

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

然后在頁面加載，或在CSS中，您可以隱藏第一個div。 當點擊發生時，您可以使用showElement來顯示它。

Answer 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>

Javascript隱藏/顯示圖層

問題描述

2 個解決方案

解決方案1
2 2011-03-16 15:48:51

解決方案2
0 已采納 2011-03-16 15:44:32

Javascript隱藏/顯示圖層

問題描述

2 個解決方案

解決方案1 2 2011-03-16 15:48:51

解決方案2 0 已采納 2011-03-16 15:44:32

解決方案1
2 2011-03-16 15:48:51

解決方案2
0 已采納 2011-03-16 15:44:32