如何使用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”;