单击另一个按钮时是否可以隐藏div？答案

【问题标题】：is it possible to hide div when another button is click?单击另一个按钮时是否可以隐藏div？
【发布时间】：2014-07-02 11:40:46
【问题描述】：

我试图在单击不同按钮时隐藏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/

【问题讨论】：

我会推荐使用Jquery，检查stackoverflow.com/questions/8685107/…
试试这样的：jsfiddle.net/S5JzK/1
@Ficky_Martin - 感谢您的链接
@Priyajain - 感谢 JS，但由于某种原因，jQuery 在我正在处理的项目中不起作用。它只允许我使用 JavaScript

标签： javascript jquery show-hide

【解决方案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/

【讨论】：

感谢您的修复 - 它部分有效，但当我单击另一个按钮时，它不会隐藏 Div。例如 - Test It 按钮是 clicked，它显示 hidethis Div，当单击 Test It 2 按钮时，它应该隐藏 hidethis Div 并显示 hidethis2 Div。希望这是有道理的:)再次感谢:)
把函数改成这个函数 showHide(divId) { $("div").hide(); $("#"+divId).toggle();这只是一个修复，您必须根据场景进行更改。如果您正在寻找选项卡结构，请查看下面的小提琴jsfiddle.net/zEwQz/500
感谢您的修复 - 您的修复部分奏效了 ;) 但它在页面中隐藏了 All 和 Divs。有可能阻止它吗？再次感谢:)
谢谢，这是我的初始代码的jsfiddle.net/S5JzK/13 链接。 :)
太棒了，这就像一个魅力:)。如果可能的话，最后一件事，可以通过单击按钮隐藏相应的 div 吗？没有必要，但只有在可能的情况下:) 再次感谢您的快速帮助！ :)

【解决方案2】：

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

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

                        });
});

【讨论】：

谢谢你 :) 它对我的不起作用？可以用 JavaScript 做到这一点吗？因为 jQuery 不能在我的 PC 上运行。再次感谢:)
jquery 将在所有浏览器中运行...只需将此 url 包含在脚本标签code.jquery.com/jquery-2.1.1.min.js 或从jquery.com/download 下载最新版本的 jquery，将其包含在脚本标签中，然后访问 jquery功能。
谢谢，我最初尝试过，但奇怪的是它应该可以工作。但由于某种原因，它不起作用。因此，我坚持使用 JavaScript。任何可能的方式将您的 jQuery 代码转换为 JavaScript？再次感谢:)
是的，我也有 javascript 的解决方案......让我为你分享小提琴......
嘿，好人，在 JS 上运行良好，但在我的机器上却不行。不需要顶部的功能是吗？谢谢:)

【解决方案3】：

要让它在小提琴中工作，在您的示例中，您需要选择左侧的 (No wrap - in head)。
看下面的例子，使用纯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 = "";
}

【讨论】：

更好的使用切换功能。
是的，我也这么认为。我只是想用纯 javascript 来说明。
@guinatal- 感谢您的可能修复 - 您对 JavaScript 的看法是正确的。出于某种原因，在 VS 2008 中，它只允许我使用 JavaScript 而不是 jQuery。您的代码可以正常工作并且可以执行应有的操作，但是它隐藏了页面上的所有 div 是否可以仅隐藏上面代码中提到的两个 div？例如 - 单击 Test It 按钮时，它会显示 hidethis Div，当单击 Test It 2 按钮时，它应该隐藏 hidethis Div 并显示 hidethis2 Div，反之亦然。希望这是有道理的:)再次感谢:)
@guinatal - 太棒了 :)，工作得很好，感谢您的帮助 :)

【解决方案4】：

使用 JQuery：

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

【讨论】：

$("#"+divId).toggle(bShow) 在一行中做同样的事情。

【解决方案5】：

您的代码看起来不错。你确定你在点击时输入了这个功能吗？尝试使用开发人员工具或警报添加断点。

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

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

或展示它：

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

【讨论】：

谢谢 :) 我试过了，但对我没用。你能提供一个例子吗？再次感谢:)

【解决方案6】：

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

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

在 jsfiddle 的 Frameworks & Extensions 标题下有一个下拉菜单，您可以在其中将默认的“onload”更改为“No wrap - in head”（或“No wrap - in body”）。这将使您的函数声明像本地实现一样全局化。

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

【讨论】：

感谢您提供的信息，现在很有意义。再次感谢，我会测试一下 :) 很棒的人！