单击按钮时如何隐藏/显示 div？
Posted
技术标签:
【中文标题】单击按钮时如何隐藏/显示 div？【英文标题】：How can I hide/show a div when a button is clicked? 【发布时间】：2013-04-24 21:33:01 【问题描述】：我有一个包含注册向导的div，我需要在单击按钮时隐藏/显示此div。
我该怎么做？
下面我给你看代码。
谢谢:)
<div id="wizard" class="swMain">
<ul>
<li><a href="#step-1">
<label class="stepNumber">1</label>
</a></li>
<li><a href="#step-2">
<label class="stepNumber">2</label>
</a></li>
<li><a href="#step-3">
<label class="stepNumber">3</label>
</a></li>
<li><a href="#step-4">
<label class="stepNumber">4</label>
</a></li>
</ul>
<div id="step-1">
<h2 class="StepTitle">Perfil</h2>
<table cellspacing="3" cellpadding="3" align="center">
<tr>
<td align="center" colspan="3"> </td>
</tr>
<tr>
<td align="right">Username :</td>
<td align="left">
<input type="text" id="username" name="username" value="" class="txtBox">
</td>
<td align="left"><span id="msg_username"></span> </td>
</tr>
<tr>
<td align="right">Password :</td>
<td align="left">
<input type="password" id="password" name="password" value="" class="txtBox">
</td>
<td align="left"><span id="msg_password"></span> </td>
</tr>
</table>
</div>
【问题讨论】：
***.com/questions/4528085/… 的可能重复项 【参考方案1】：使用 JQuery。您需要在按钮上设置一个单击事件，该事件将切换向导 div 的可见性。
$('#btn').click(function()
$('#wizard').toggle();
);
有关详细信息，请参阅JQuery 网站。
这也可以在没有 JQuery 的情况下完成。仅使用标准 javascript：
<script type="text/javascript">
function toggle_visibility(id)
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
</script>
然后将onclick="toggle_visibility('id_of_element_to_toggle');"添加到用于显示和隐藏div的按钮上。
【讨论】：
我确实认为 OP 正在寻找一种比必须使用第三方库（未标记 jQuery）更简单的解决方案。这可以在没有 JQuery 的情况下完成。 请注意 OP：当您不希望 #wizard div 为其他元素释放空间时，请使用visibility: hidden/ visible;。如果您希望#wizard div 被隐藏，并且隐藏时的大小、边距和填充属性等于 0，请使用 display: none/ block;。【参考方案2】：
这行得通：
function showhide(id)
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
<!DOCTYPE html>
<html>
<body>
<a href="javascript:showhide('uniquename')">
Click to show/hide.
</a>
<div id="uniquename" style="display:none;">
<p>Content goes here.</p>
</div>
</body>
</html>【讨论】：
感谢您提供简单高效的解决方案 :)【参考方案3】：仅使用 HTML/CSS 无法做到这一点。你需要在这里使用javascript。在 jQuery 中它会是：
$('#button').click(function(e)
e.preventDefault(); //to prevent standard click event
$('#wizard').toggle();
);
【讨论】：
【参考方案4】：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show and hide div with JavaScript</title>
<script>
var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>';
var show_button = 'Show', hide_button = 'Hide';
function showhide()
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" )
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
else
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
function setup_button( status )
if ( status == 'show' )
button = hide_button;
else
button = show_button;
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
window.onload = function ()
setup_button( 'hide' );
showhide(); // if setup_button is set to 'show' comment this line
</script>
</head>
<body>
<div id="showhide"></div>
<div id="hide_show">
<p>This div will be show and hide on button click</p>
</div>
</body>
</html>
【讨论】：
【参考方案5】：下面的解决方法是：
最简短。有点类似于here。它也很少：DIV 中的表格与您的问题正交。 fastest：getElementById 一开始就被调用一次。这可能适合也可能不适合您的目的。
它使用纯 JavaScript（即没有 JQuery）。
它使用button。您的口味可能会有所不同。
可扩展：可以添加更多 DIV，共享代码。
mydiv = document.getElementById("showmehideme");
function showhide(d)
d.style.display = (d.style.display !== "none") ? "none" : "block";
#mydiv background-color: #ddd; <button id="button" onclick="showhide(mydiv)">Show/Hide</button>
<div id="showmehideme">
This div will show and hide on button click.
</div>【讨论】：
Hmmmm ... TypeError: d 在单击按钮时为空。我们如何让这个 sn-p 工作？ @MarcoZen 它在 Chrome、Firefox 和 Safari 上运行良好。你用的是哪个浏览器？ Firefox...现在不在家...所以无法评论版本。感谢您花时间回复。非常感谢。【参考方案6】： $('#btn').click(function()
$('#wizard').toggle();
);
如果你想从div开始隐藏，你应该添加style="display:none;"，像这样：
<div style="display:none;"> </div>
【讨论】：
【参考方案7】：任务可以在没有 jQuery 等的情况下用简单的 javascript 编写。
<script type="text/javascript">
function showhide()
document.getElementById("wizard").className = (document.getElementById("wizard").className=="swMain") ? swHide : swMain;
</script>
这个函数是简单的 if 语句，检查 wizard 是否有类 swMain 并将类更改为 swHide，否则如果不是 swMain 然后更改为 swMain。此代码不支持多个类属性，但在这种情况下就足够了。
现在你必须创建一个名为 swHide 的 CSS 类，它具有 display: none
然后添加到按钮 onclick="showhide()"
就是这么简单。
【讨论】：
【参考方案8】：您可以完全使用 html 和 css 来完成这项工作，我有。
HTML
首先，您给要隐藏的 div 一个 ID 以像 #view_element 一样定位目标，以及像 #hide_element 这样定位的类。如果你希望这两个类都可以，但我不知道你是否可以让它们都成为 ID。然后让你的 Show 按钮以你的节目 ID 为目标，你的 Hide 按钮以你的隐藏类为目标。这就是 html 的隐藏和显示是在 CSS 中完成的。
CSS 显示和隐藏它的 css 应该是这样的
#hide_element:target
display:none;
.show_element:target
display:block;
这应该允许您随意隐藏和显示元素。这应该适用于 span 和 div。
【讨论】：
我喜欢这个，唯一的问题是它需要使用一个ID。对我来说，这是有问题的，因为我可能有多个动态生成的文本块。对于一个简单的静态 html 网站，虽然这很好。 有人能解释一下如何让按钮以 ID/类为目标吗？【参考方案9】：您可以通过将可见性设置为隐藏或显示为无的类来实现，然后通过 javascript 在您希望的元素上切换该类。
const para = document.querySelector("div");
const btn = document.querySelector('button');
btn.addEventListener('click', ()=>
para.classList.toggle('visibility-toggle')
).visibility-toggle
visibility: hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>Show/Hide</button>
<div>
<h2>Heading</h2>
<p>Click the button above me to hide me.</p>
</div>
</body>
</html>【讨论】：
以上是关于单击按钮时如何隐藏/显示 div？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 MVC 中隐藏一个 div 并在按钮单击事件上显示另一个
reactjs - 如何隐藏一个div并将其替换为reactjs中的另一个div？