Html 如何使用 JavaScript 隐藏/显示 div 标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15260418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide/show div tags using JavaScript?
提问by Shaughn Williams
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:
基本上，我正在尝试创建一个链接，当按下该链接时，它将隐藏当前的 body div 标签并在其位置显示另一个，不幸的是，当我单击该链接时，第一个 body div 标签仍会出现。这是 HTML 代码：
<div id="body">
<h1>Numbers</h1>
</div>
<div id="body1">
Body 1
</div>
Here is the CSS code:
这是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;
}
Here is the JavaScript code:
这是 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
}
NB: CSS tags are declared in different files
注意：CSS 标签在不同的文件中声明
回答by Iwo Kucharski
Have you tried
你有没有尝试过
document.getElementById('body').style.display = "none";
document.getElementById('body').style.display = "none";
instead of
代替
document.getElementById('body').style.display = "hidden";?
document.getElementById('body').style.display = "hidden";?
回答by vishal vasistha
just use a jquery event listner , click event. let the class of the link is lb... i am considering body as a div as you said...
只需使用 jquery 事件监听器，单击事件。让链接的类是 lb...我正在考虑将 body 视为 div，正如您所说...
$('.lb').click(function() {
$('#body1').show();
$('#body').hide();
});
回答by Touhid Rahman
Use the following code:
使用以下代码：
function hide {
document.getElementById('div').style.display = "none";
}
function show {
document.getElementById('div').style.display = "block";
}
回答by polybios
Consider using jQuery. Life is much easier with:
考虑使用jQuery. 生活更轻松：
$('body').hide(); $('body1').show();
回答by Rahul Sawant
You can Hide/Show Div using Js function. sample below
您可以使用 Js 功能隐藏/显示 Div。下面的示例
<script>
function showDivAttid(){
if(Your Condition)
{
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML - Show/Hide this text
HTML - 显示/隐藏此文本
回答by codeeasy
Set your HTML as
将您的 HTML 设置为
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
And now set the javascript as
现在将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
}
Check, it works.
检查，它有效。
回答by Fady Wageeh
try yo write document.getElementById('id').style.visibility="hidden";
试试你写 document.getElementById('id').style.visibility="hidden";
