如何使用 JavaScript 隐藏/显示 div 标签？答案

【问题标题】：How to hide/show div tags using JavaScript?如何使用 JavaScript 隐藏/显示 div 标签？
【发布时间】：2013-02-22 00:22:20
【问题描述】：

基本上，我正在尝试创建一个链接，当按下该链接时，它将隐藏当前的 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 标签在不同的文件中声明

【问题讨论】：

标签： javascript html

【解决方案1】：

你试过了吗

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

而不是

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

【讨论】：

【解决方案2】：

考虑使用jQuery。生活更轻松：

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

【讨论】：

【解决方案3】：

使用以下代码：

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

【讨论】：

【解决方案4】：

只需使用 jquery 事件列表器，单击事件。让链接的类是 lb...我正在考虑将 body 视为 div，如您所说...

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

【讨论】：

【解决方案5】：

试着写 document.getElementById('id').style.visibility="hidden";

【讨论】：

可能是 style.visibility ？

【解决方案6】：

您可以使用 Js 功能隐藏/显示 Div。下面的示例

   <script>
        function showDivAttid(){

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

        }

    </script>

HTML - 显示/隐藏此文本

【讨论】：

【解决方案7】：

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

检查，它有效。

【讨论】：