Question

当点击不同的按钮但我不知道如何时，我试图隐藏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/

Answer 1

<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();
}

检查小提琴http://jsfiddle.net/S5JzK/7/

Answer 2

要在小提琴中工作，在你的例子中，你需要在左边选择（没有包裹头）。
使用纯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 = "";
}

http://jsfiddle.net/S5JzK/9/

另一个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 = "";
}

Answer 3

请试试这个，效果很好，很简单，

<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");

                        });
});

Answer 4

使用JQuery：

function showHideDiv(divId, bShow) {
  if (bShow) {
    $("#" + divId).show();
  } else {
    $("#" + divId).hide();
  }
}

Answer 5

你的代码似乎很好。你确定点击进入该功能吗？尝试使用开发人员工具或警报添加断点。

无论如何，我看到你用jquery标记了这篇文章。你可以更优雅地完成任务。

   $("#" + theDiv).hide();

或显示它：

   $("#" + theDiv).show();

Answer 6

“JSFIDDLE：不是在这里做，而是在本地工作”

是的，因为默认情况下，jsfiddle将您的JS包装在onload处理程序中，这意味着函数声明对于该处理程序是本地的。像onclick="showHide('hidethis')"这样的内联html属性事件处理程序只能调用全局函数。

在jsfiddle的 Frameworks＆amp;扩展名标题是一个下拉列表，您可以将默认的“onload”更改为“No wrap-in head”（或“No wrap-in body”）。这将使您的函数声明在本地实现中变为全局。

演示：http://jsfiddle.net/S5JzK/8/

当点击另一个按钮时，是否可以隐藏div？

JSFIDDLE：不是在这里做的，而是在本地工作

6 个答案: