在点击jQuery的节目格,隐藏其他节目、jQuery

2023-09-10 19:23:26 作者:心污身子净

我想有它显示一个div并隐藏其他人在我的网页文本区域(比如说8其他的div)。在点击,我想选择的div来显示和当前DIV&安培;其他的div隐藏。有一个简单的解决办法?可以构建关中:http://stackoverflow.com/questions/2509807/show-current-clicked-div-hide-$p$pvious-clicked-div ?

I'd like to have a text area on my page that shows a div and hides the others (let's say 8 other divs). On click, I'd like the chosen div to show and the current div & other divs to hide. Is there a simple solution to this? Possible to build off of: http://stackoverflow.com/questions/2509807/show-current-clicked-div-hide-previous-clicked-div ?

推荐答案

下面是一个简单的解决方案利用串联起来的方法。

Here's a simple solution making use of chaining together methods.

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

的jsfiddle例如 (使用$(输入)) 的jsfiddle例如 (使用$(类名))

的激活按钮可能具有相同的 ID 受影响的div,或者您可以使用单独的toggler级。

The activating buttons could have the same class as the id of the affected divs, or you can use a separate "toggler" class.

最重要的部分是用点击的元素的一个独特的功能映射到切换元素的独特功能。

The important part is to use a unique feature of the clicked element to map to a unique feature of the toggled element.

最后,如果反复的div 都没有兄弟姐妹,你可以设置所有的人都使用 VAR的div = $的选择(# blah1,#blah2,#blah3,......); 键,切换使用它们。不是()

Finally, if the toggling divs are not siblings, you can set up a selector of all of them using var divs = $("#blah1, #blah2, #blah3, ..."); and toggle them using .not().

的jsfiddle例如非同级切换的div 使用。不是()