如何在点击时显示 div，用 jQuery 隐藏其他？答案

【问题标题】：How can I show div on click, hide the others with jQuery?如何在点击时显示 div，用 jQuery 隐藏其他？
【发布时间】：2010-08-16 16:02:47
【问题描述】：

我想在我的页面上有一个显示 div 并隐藏其他 div 的文本区域（比如说 8 个其他 div）。单击时，我希望显示所选的 div，并隐藏当前的 div 和其他 div。有一个简单的解决方案吗？可能建立在：show current clicked div hide previous clicked div ?

【问题讨论】：

我遗漏了一些东西 - 我希望这些 div 在点击页面的不同区域时显示/隐藏 (li a)。
我在我的解决方案中使用了input 按钮来切换divs，这是您的意思吗？

标签： jquery ajax

【解决方案1】：

这是一个使用链接方法的简单解决方案。

$("input").click(function () 
{
    $("#" + $(this).attr("class")).show().siblings('div').hide();
});

jsFiddle example ( 使用 $("input") )
jsFiddle example ( 使用 $(".className") )

激活按钮可以具有与受影响 div 的 id 相同的 class，或者您可以使用单独的“toggler”类。

重要的部分是使用被点击元素的独特特征来映射到切换元素的独特特征。

最后，如果切换divs 不是同级，您可以使用var divs = $("#blah1, #blah2, #blah3, ..."); 设置所有它们的选择器并使用.not() 切换它们。

jsFiddle example 非同级切换 divs 使用 .not()

【讨论】：

这很好用——我使用了 .not() 示例并使用 img 作为我的选择器，因为我的 a.class 被用于另一个事件。谢谢！
@ShawnB - 很高兴听到。不要忘记接受可以解决您的问题的答案（选票下方的复选标记），并为您认为有用的答案投票。

【解决方案2】：

这样的事情怎么样？

$(document).ready( function(){
  $('div.some_class').click( function(){ // set of divs to be clickable
    $(this).siblings('div').hide(); // it's already showing, right?
  });
});

当然，一旦点击了一个而其他的被隐藏了，你将无法将它们带回来......

【讨论】：

【解决方案3】：

这取决于 DOM 结构。我会亲自给他们一些课程，以便轻松访问整个小组。 $('.div-group').hide(0, function(){$('#my-div').show();});

考虑使用 jQuery UI Accordion，这可能是您需要的功能的答案。

【讨论】：