jQuery在点击时显示div，隐藏其他

问题描述：

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

我的东西离开了非同级切换divsjsFiddle example。 – ShawnB 2010-08-16 17:27:02

我在我的解决方案中使用了'input'按钮来切换'divs'，这是你的意思吗？ – 2010-08-16 18:10:55

答

下面是一个简单的解决方案，利用链接在一起的方法。

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

（使用$（ “输入”））
jsFiddle example（使用$（ “的className”））

该活化按钮可以具有相同的class为一体的idjsFiddle example受影响的div，或者你可以使用一个单独的“toggler”类。

重要的部分是使用clicked元素的独特功能映射到切换元素的独特功能。

最后，如果切换divs不是兄弟，您可以使用var divs = $("#blah1, #blah2, #blah3, ...");设置所有人的选择器，并使用.not()切换它们。我想这些div显示/隐藏在页面的不同区域被点击（李一） -

的使用.not()

这工作得很好 - 我使用了.not（）示例，并将img用作我的选择器，因为我的a.class正在用于其他事件。谢谢！ – ShawnB 2010-08-17 13:46:38

@ShawnB - 很高兴听到。不要忘记接受解决问题的答案（选票下面的选项标记），并投票回答您认为有用的答案。 – 2010-08-17 21:48:15

答

这样的事情呢？

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

当然，一旦一个被点击，其余是隐藏的，你有没有办法把他们回来的......

答

这取决于DOM结构。我会亲自给他们上课，让他们可以轻松访问整个团队。 $('.div-group').hide(0, function(){$('#my-div').show();});

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

jQuery在点击时显示div，隐藏其他

相关推荐