使用 Jquery 显示/隐藏多个 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6967081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/Hide Multiple Divs with Jquery
提问by Paul
I want to use some buttons to show/hide multiple divs using jquery.
我想使用一些按钮来使用 jquery 显示/隐藏多个 div。
The page will initially show all divs. The idea then is that there will be a button to reset (show all) and then separate buttons to show a particular div while hiding the rest.
该页面最初将显示所有 div。然后的想法是将有一个按钮来重置（显示全部），然后将按钮分开以显示特定的 div，同时隐藏其余部分。
Any help would be much appreciated.
任何帮助将非常感激。
<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>
<div id="div1">Lorum Ipsum</div>
<div id="div2">Lorum Ipsum</div>
<div id="div3">Lorum Ipsum</div>
<div id="div4">Lorum Ipsum</div>
回答by Praveen Prasad
jQuery(function() {
jQuery('#showall').click(function() {
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>回答by Dan Esparza
If they fall into logical groups, I would probably go with the class approach already listed here.
Many people seem to forget that you can actually select several items by id in the same jQuery selector, as well:
许多人似乎忘记了您实际上也可以在同一个 jQuery 选择器中按 id 选择多个项目：
$("#div1, #div2, #div3").show();
Where 'div1', 'div2', and 'div3' are all id attributes on various divs you want to show at once.
其中 'div1'、'div2' 和 'div3' 都是您想要一次显示的各种 div 上的 id 属性。
回答by Bozho
Assign each div a class. Then you can perform actions on all of them:
为每个 div 分配一个class。然后你可以对所有这些执行操作：
$(".divClass").hide();
So each button can do:
所以每个按钮都可以：
$(".divClass").hide()
$("#specificDiv").show();
You can make this more generic, and use the obvious convention - the button and the div with the same number in the id are related. So:
您可以使其更通用，并使用明显的约定 - id 中具有相同数字的按钮和 div 是相关的。所以：
$(".button").click(function() {
var divId = "#div" + $(this).attr("id").replace("showdiv", "");
$(".divClass").hide();
$(divId).show();
}
回答by DN1CE
Just a small side-note... If you are using this with other scripts, the $ on the last line will cause a conflict. Just replace it with jQuery and you're good.
只是一个小的旁注...如果您将它与其他脚本一起使用，最后一行的 $ 将导致冲突。只需用 jQuery 替换它就可以了。
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+jQuery(this).attr('target')).show();
});
});
回答by Jacek Kaniuk
simple but stupid approach:
简单但愚蠢的方法：
$('#showall').click(function(){
$('div[id^=div]').show();
});
$('#showdiv1').click(function(){
$('#div1').show();
$('div[id^=div]').not('#div1').show();
});
as for better one - add common class to all div's, and use some attribute in buttons with id of target divs
至于更好的一个 - 向所有 div 添加公共类，并在具有目标 div id 的按钮中使用一些属性
回答by yoda
If you want to be able to show / hide singular divs and / or groups of divs with less code, just apply several classes to them, to insert them into groups if needed.
如果您希望能够以较少的代码显示/隐藏单个 div 和/或 div 组，只需对它们应用几个类，并在需要时将它们插入到组中。
Example :
例子 ：
.group1 {}
.group2 {}
.group3 {}
<div class="group3"></div>
<div class="group1 group2"></div>
<div class="group1 group3 group2"></div>
Then you just need to use an identifier to link the action to he target, and with 5,6 lines of jquery code you have everything you need.
然后你只需要使用一个标识符将动作链接到他的目标，并且使用 5,6 行 jquery 代码你就拥有了你需要的一切。
回答by Amir Ismail
Check This Example
检查这个例子
Html:
网址：
<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
Javascript:
Javascript：
$('#showall').click(function(){
$('div').show();
});
$('#showdiv1').click(function(){
$('div[id^=div]').hide();
$('#div1').show();
});
$('#showdiv2').click(function(){
$('div[id^=div]').hide();
$('#div2').show();
});
$('#showdiv3').click(function(){
$('div[id^=div]').hide();
$('#div3').show();
});
$('#showdiv4').click(function(){
$('div[id^=div]').hide();
$('#div4').show();
});
回答by Justin
I had this same problem, read this post, but ended building this solution that selects the divs dynamically by fetching the ID from a custom class on the hrefusing JQuery's attr()function.
我有同样的问题，阅读这篇文章，但结束了构建这个解决方案，该解决方案通过从href使用 JQueryattr()函数的自定义类中获取 ID 来动态选择 div 。
Here's the JQuery:
这是 JQuery：
$('a.custom_class').click(function(e) {
var div = $(this).attr('href');
$(div).toggle('fast');
e.preventDefault();
}
And you just have to create a link like this then in the HTML:
你只需要在 HTML 中创建一个这样的链接：
<a href="#" class="#1">Link Text</a>
<div id="1">Div Content</div>
