單擊另一個按鈕時是否可以隱藏div？
[英]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>
JSFIDDLE：在這里不做，但是在本地工作
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();
}
解決方案2
1 2014-05-14 12:22:05
為了使它發揮作用，在您的示例中，您需要選擇左側的（無環繞式）。
使用純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 = "";
}
解決方案3
1 2014-05-14 13:01:33
請嘗試一下，它運作良好且非常簡單，
<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
使用JQuery：
function showHideDiv(divId, bShow) {
if (bShow) {
$("#" + divId).show();
} else {
$("#" + divId).hide();
}
}
解決方案5
0 2014-05-14 12:13:42
您的代碼看起來不錯。 您確定單擊時輸入功能嗎？ 嘗試使用開發人員工具或警報添加斷點。
無論如何，我看到您用jquery標記了此帖子。 您可以更優雅地完成任務。
$("#" + theDiv).hide();
或用於顯示它：
$("#" + theDiv).show();
解決方案6
0 2014-05-14 12:24:53
“ 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/
單擊按鈕顯示div，然后單擊其外部時隱藏此div
[英]Show div on click on button, then hide this div when clicking outside of it
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.