2013-03-06 88 views
9

基本上,我試圖做一個鏈接,當按下時,將隱藏當前body div標籤並在其位置顯示另一個鏈接,不幸的是,當我單擊該鏈接時,第一個body div標籤仍然出現。下面是HTML代碼:如何使用JavaScript隱藏/顯示div標籤?

<div id="body"> 
<h1>Numbers</h1> 
</div> 
<div id="body1"> 
Body 1 
</div> 

這裏是CSS代碼:

#body 
{ 
height: 500px; 
width: 100%; 
margin: auto auto; 
border: solid medium thick; 
} 

#body1 
{ 
height: 500px; 
width: 100%; 
margin: auto auto; 
border: solid medium thick; 
display: hidden; 
} 

這裏是JavaScript代碼:

function changeDiv() 
{ 
document.getElementById('body').style.display = "hidden"; // hide body div tag 
document.getElementById('body1').style.display = "block"; // show body1 div tag 
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked 
} 

注:CSS標籤在不同的文件

聲明

回答

31

您試過

document.getElementById('body').style.display = "none";

代替

document.getElementById('body').style.display = "hidden";

1

考慮使用jQuery。使用$('body')可以讓生活變得簡單。hide(); $( 'body1')顯示()。

4

使用下面的代碼:

function hide { 
document.getElementById('div').style.display = "none"; 
} 
function show { 
document.getElementById('div').style.display = "block"; 
} 
9

只使用一個jQuery事件聽者,單擊事件。 讓班裏的鏈接是磅......我正在考慮身體作爲一個div如你所說...

$('.lb').click(function() { 
    $('#body1').show(); 
    $('#body').hide(); 
}); 
-3

嘗試喲寫 的document.getElementById(「身份證」)。style.visibility = 「隱藏」;

+0

可能是style.visibility? – mpromonet 2015-01-18 20:43:42

1

您可以使用Js功能隱藏/顯示Div。下面

<script> 
     function showDivAttid(){ 

      if(Your Condition) 
      { 
      document.getElementById("attid").style.display = 'inline'; 
      } 
      else 
      { 
      document.getElementById("attid").style.display = 'none'; 
      } 

     } 

    </script> 

HTML樣本 - 顯示/隱藏本文

1

設置你的HTML作爲

<div id="body" hidden=""> 
<h1>Numbers</h1> 
</div> 
<div id="body1" hidden="hidden"> 
Body 1 
</div> 

現在設定的JavaScript作爲

 function changeDiv() 
     { 
     document.getElementById('body').hidden = "hidden"; // hide body div tag 
     document.getElementById('body1').hidden = ""; // show body1 div tag 
     document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; 
     // display text if JavaScript worked 
     } 

檢查,它的工作原理。