单击另一个按钮时是否可以隐藏div？
[英]is it possible to hide div when another button is click?
问题描述
I am trying to hide the div 's when different buttons are clicked but I don't know how to. 
单击不同的按钮时，我试图隐藏div但我不知道如何。 (So when 'Test 1' is clicked it should hide 'Test 2' Div and vice versa) I checked here and on Google but couldn't find an answer for it. （因此，当单击“测试1”时，它应该隐藏“测试2” Div，反之亦然）我在此处和Google上进行了检查，但找不到答案。
Javascript : Javascript：
function showHide(divId) {
var theDiv = document.getElementById(divId);
if (theDiv.style.display == "none") {
theDiv.style.display = "";
} else {
theDiv.style.display = "none";
}
}
HTML : HTML：
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JSFIDDLE: is not doing it here but works locally JSFIDDLE：在这里不做，但是在本地工作
http://jsfiddle.net/S5JzK/
http://jsfiddle.net/S5JzK/
6 个解决方案
解决方案1
2 已采纳
<input type="button" onclick="showHide('hidethis')" value="Test It" />
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
function showHide(divId) {
$("#"+divId).toggle();
}
Check the Fiddle http://jsfiddle.net/S5JzK/7/ 检查小提琴http://jsfiddle.net/S5JzK/7/
解决方案2
1 2014-05-14 12:22:05
To it work in fiddle, in your example, you need to select (No wrap - in head) on the left.
为了使它发挥作用，在您的示例中，您需要选择左侧的（无环绕式）。 Look the example below, using pure javascript:
使用纯javascript查看以下示例：
HTML HTML
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JAVASCRIPT JAVASCRIPT
function showHide(divId) {
/* Hide all divs */
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
http://jsfiddle.net/S5JzK/9/ http://jsfiddle.net/S5JzK/9/
ANOTHER JAVASCRIPT EXAMPLE 另一个JAVASCRIPT示例
function showHide(divId) {
/* Hide the divs that you want */
var div1 = document.getElementById('#hidethis');
var div2 = document.getElementById('#hidethis2');
div1.style.display = "none";
div2.style.display = "none";
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
解决方案3
1 2014-05-14 13:01:33
Please try this, it works well and so simple, 请尝试一下，它运作良好且非常简单，
<html>
<head>
<style>
.manageDiv{
display:none;
}
</style>
</head>
<body>
<input type="button" class="testButton" value="Test It" />
<input type="button" class="testButton" value="Test It 2" />
<div id="hidethis2" class="manageDiv">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
</body>
</html>
$(function(){
$(".testButton").on("click", function(){
$("#hidethis2").toggleClass("manageDiv");
});
});
解决方案4
0 2014-05-14 12:13:14
Using JQuery: 使用JQuery：
function showHideDiv(divId, bShow) {
if (bShow) {
$("#" + divId).show();
} else {
$("#" + divId).hide();
}
}
解决方案5
0 2014-05-14 12:13:42
your code seems fine. 您的代码看起来不错。 are you sure you enter the function upon click? 您确定单击时输入功能吗？ try adding a breakpoint using developer tools or an alert. 尝试使用开发人员工具或警报添加断点。
Anyways, I see you tagged this post with jquery. 无论如何，我看到您用jquery标记了此帖子。 you can you it to do the task more elegantly. 您可以更优雅地完成任务。
$("#" + theDiv).hide();
or for showing it: 或用于显示它：
$("#" + theDiv).show();
解决方案6
0 2014-05-14 12:24:53
"JSFIDDLE: is not doing it here but works locally"
Yes, because by default jsfiddle wraps your JS in an onload handler, which means the function declaration is local to that handler. 是的，因为默认情况下，jsfiddle将您的JS包装在一个onload处理程序中，这意味着函数声明对于该处理程序是本地的。 Inline html attribute event handlers like your onclick="showHide('hidethis')" can only call global functions. 内联html属性事件处理程序（如onclick="showHide('hidethis')"只能调用全局函数。
Under jsfiddle's Frameworks & Extensions heading there's a drop-down where you can change the default "onload" to "No wrap - in head" (or "No wrap - in body"). 在jsfiddle的Frameworks＆Extensions标题下，有一个下拉菜单，您可以将默认的“ onload”更改为“ No wrap-in head”（或“ No wrap-in body”）。 That'll make your function declaration global as in your local implementation. 这将使函数声明像在本地实现中一样全局。
Demo: http://jsfiddle.net/S5JzK/8/ 演示： http ： //jsfiddle.net/S5JzK/8/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.