如何使用JavaScript隐藏/显示div标签？ [英] How to hide/show div tags using JavaScript?

问题描述

基本上，我试图建立一个链接，当按下时，会隐藏当前的body div标签，并在其位置显示另一个链接，遗憾的是，当我点击链接时，第一个body div标签仍然出现。这里是HTML代码：

 < div id =body> 
< h1> Numbers< / h1> 
< / div> 
< div id =body1> 
正文1 
< / div> 
  

以下是CSS代码：

  #body 
 {
 height：500px; 
宽度：100％; 
保证金：auto auto; 
边框：厚实的中等厚度; 
} 
 
＃body1 
 {
 height：500px; 
宽度：100％; 
保证金：auto auto; 
边框：厚实的中等厚度; 
 display：hidden; 
} 
  

以下是JavaScript代码：

  function changeDiv（）
 {
 document.getElementById（'body'）。style.display =hidden; //隐藏body div标签
 document.getElementById（'body1'）。style.display =block; // show body1 div tag 
 document.getElementById（'body1'）。innerHTML =如果你能看到这个，JavaScript函数工作; //如果JavaScript正常显示文本
} 
  

注意：CSS标签声明在不同的文件中

解决方案

您有没有试过

.getElementById（'body'）。style.display =none;

而不是

document.getElementById（'body'）。style.display =hidden; ？

Basically, I'm trying to make a link that, when pressed, will hide the current body div tag and show another one in its place, unfortunately, when I click the link, the first body div tag still appears. Here is the HTML code:

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

Here is the CSS code:

#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;
}

Here is the JavaScript code:

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
}

NB: CSS tags are declared in different files

解决方案

Have you tried

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

instead of

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

这篇关于如何使用JavaScript隐藏/显示div标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！