使用Jquery显示/隐藏多个Div

我想使用一些按钮来显示/隐藏使用jquery的多个div。

该页面最初将显示所有div。 接下来的想法是，将有一个按钮来重置（显示全部），然后单独按钮以显示特定的div，同时隐藏其余部分。

任何帮助将非常感激。

 All Div 1 Div 2 Div 3 Div 4 
 
Lorum Ipsum
 
Lorum Ipsum
 
Lorum Ipsum
 
Lorum Ipsum 

Answer 1

 jQuery(function() { jQuery('#showall').click(function() { jQuery('.targetDiv').show(); }); jQuery('.showSingle').click(function() { jQuery('.targetDiv').hide(); jQuery('#div' + $(this).attr('target')).show(); }); }); 

  
 All Div 1 Div 2 Div 3 Div 4 
 
Lorum Ipsum1
 
Lorum Ipsum2
 
Lorum Ipsum3
 
Lorum Ipsum4 

Answer 2

如果他们属于逻辑组， 我可能会选择此处列出的类方法 。

许多人似乎忘记了你可以在同一个jQuery选择器中通过id实际选择几个项目 ：

 $("#div1, #div2, #div3").show(); 

其中’div1’，’div2’和’div3’都是您想要一次显示的各种div上的id属性。

Answer 3

为每个div分配一个class 。 然后，您可以对所有这些操作执行操作：

 $(".divClass").hide(); 

所以每个按钮都可以：

 $(".divClass").hide() $("#specificDiv").show(); 

你可以使它更通用，并使用明显的约定 – 按钮和id中相同数字的div是相关的。 所以：

 $(".button").click(function() { var divId = "#div" + $(this).attr("id").replace("showdiv", ""); $(".divClass").hide(); $(divId).show(); } 

Answer 4

简单但愚蠢的方法：

 $('#showall').click(function(){ $('div[id^=div]').show(); }); $('#showdiv1').click(function(){ $('#div1').show(); $('div[id^=div]').not('#div1').show(); }); 

至于更好的一个 – 为所有div添加公共类，并在id为目标div的按钮中使用一些属性

Answer 5

如果您希望能够用较少的代码显示/隐藏单个div和/或div组，只需对它们应用几个类，以便在需要时将它们插入组中。

示例：

 .group1 {} .group2 {} .group3 {} 
 
 
 

然后你只需要使用一个标识符将动作链接到他的目标，并使用5,6行jquery代码，你拥有你需要的一切。

Answer 6

检查此示例

HTML：

 
 All Div 1 Div 2 Div 3 Div 4 
 
1
 
2
 
3
 
4 

使用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(); }); 

Answer 7

只是一个小小的注释……如果你在其他脚本中使用它，最后一行的$将导致冲突。 只需用jQuery替换它就可以了。

 jQuery(function(){ jQuery('#showall').click(function(){ jQuery('.targetDiv').show(); }); jQuery('.showSingle').click(function(){ jQuery('.targetDiv').hide(); jQuery('#div'+jQuery(this).attr('target')).show(); }); }); 

http://jsfiddle.net/XwN2L/4764/

Answer 8

我有同样的问题，阅读这篇文章，但结束了构建这个解决方案，通过使用JQuery的attr()函数从href上的自定义类中获取ID来动态选择div。

这是JQuery：

 $('a.custom_class').click(function(e) { var div = $(this).attr('href'); $(div).toggle('fast'); e.preventDefault(); } 

你只需要在HTML中创建这样的链接：

 Link Text 
Div Content