[英]is it possible to hide div when another button is click?
单击不同的按钮时,我试图隐藏div
但我不知道如何。 (因此,当单击“测试1”时,它应该隐藏“测试2” Div,反之亦然)我在此处和Google上进行了检查,但找不到答案。
Javascript:
function showHide(divId) {
var theDiv = document.getElementById(divId);
if (theDiv.style.display == "none") {
theDiv.style.display = "";
} else {
theDiv.style.display = "none";
}
}
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>
<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();
}
为了使它发挥作用,在您的示例中,您需要选择左侧的(无环绕式)。
使用纯javascript查看以下示例:
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
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 = "";
}
另一个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 = "";
}
请尝试一下,它运作良好且非常简单,
<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");
});
});
使用JQuery:
function showHideDiv(divId, bShow) {
if (bShow) {
$("#" + divId).show();
} else {
$("#" + divId).hide();
}
}
您的代码看起来不错。 您确定单击时输入功能吗? 尝试使用开发人员工具或警报添加断点。
无论如何,我看到您用jquery标记了此帖子。 您可以更优雅地完成任务。
$("#" + theDiv).hide();
或用于显示它:
$("#" + theDiv).show();
“ JSFIDDLE:在这里不做,但是在本地工作”
是的,因为默认情况下,jsfiddle将您的JS包装在一个onload处理程序中,这意味着函数声明对于该处理程序是本地的。 内联html属性事件处理程序(如onclick="showHide('hidethis')"
只能调用全局函数。
在jsfiddle的Frameworks&Extensions标题下,有一个下拉菜单,您可以将默认的“ onload”更改为“ No wrap-in head”(或“ No wrap-in body”)。 这将使函数声明像在本地实现中一样全局。
演示: http : //jsfiddle.net/S5JzK/8/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.