如何使用JavaScript隱藏/顯示div標簽？

Question

基本上，我正在嘗試創建一個鏈接，當按下時，將隱藏當前的body div標簽並在其位置顯示另一個，不幸的是，當我單擊該鏈接時，仍會出現第一個body div標記。 這是HTML代碼：

<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標簽在不同的文件中聲明

Answer 1

你有沒有嘗試過

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

代替

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

Answer 2

只需使用jquery事件列表器，單擊事件。 讓鏈接的類是lb ...我正在考慮身體作為div你說...

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

Answer 3

使用以下代碼：

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

Answer 4

考慮使用jQuery 。 生活更容易：

$('body').hide(); $('body1').show();

Answer 5

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

   <script>
        function showDivAttid(){

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

        }

    </script>

HTML - 顯示/隱藏此文本

Answer 6

將您的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
       }

檢查，它的工作原理。

Answer 7

嘗試你寫document.getElementById（'id'）。style.visibility =“hidden”;