Javascript 单击组合两组浮动

我有一页对开本。当用户单击“设计”链接时，将显示所有相关的设计图像。当用户单击“艺术”时，将显示所有相关的艺术图像

我想要的是一个“全部”按钮，它将它们全部结合在一起

这两个集合包含在div中，在下面的javascript中可以完美地打开和关闭。我需要的是添加到脚本中，这样就有了一个函数，可以显示-单击全部并同时显示两者，而不是一个或另一个

当它们都打开时，它们会很好地相互融合，所以这不是问题。我会尽量让代码简洁。我在每个部分中只保留了一张图片，但实际上有6-7张

提前谢谢

我的html是：

<div class="sectiondivider">
             <div id="ThumbLinks">   
                        <a href="#" name="thumbs" id="all">ALL</a>  
                        <a href="#" name="thumbs" id="art">ART</a><br />   
                        <a href="#" name="thumbs" id="gd">GD</a>   
            </div> 
</div>

<div class="thumb_container">
            <div class="thumbs" id="gd_info">
                     <div class="flex_one">
                         <img class="icon-image" src="gd.jpg"/>
                      </div>    
           </div>
           <div class="thumbs" id="art_info">
                     <div class="flex_one">
                         <img class="icon-image" src="art.jpg"/>
                      </div>    
            </div>
</div>

Javascript

$('#ThumbLinks a').click(function(e) {
     // do something fancy
     return false; // prevent default click action from happening!
     e.preventDefault(); // same thing as above
});

$(document).ready(function(){
     $("div.thumbs:gt(0)").hide();  // to hide all div except for the first one
     $('#ThumbLinks a').click(function(selected) {
        var getID = $(this).attr("id");      
        var projectImages = $(this).attr("name");      

        $("div.thumbs").hide();       
        $("#" + getID + "_info" ).fadeIn( "slow" ); 


    });  
});  

试试这个片段

它只是检查链接的id是否为

all

，以显示所有链接，如果不是，则继续使用旧代码。我尽量使它尽可能短

编辑：首先，如果你把它们全部隐藏起来，效果会更好

  $('#ThumbLinks a').click(function(e) {
    // first we hide them all (for a nicer effect)
    $("div.thumbs").hide();
    if ($(this).attr("id") == "all")
    // if the ThumbLink's id is 'all' we fade in all the divs 
      $(".thumbs").fadeIn("slow");
    else
    // if not, we fade in just the correct one 
      $("#" + $(this).attr("id") + "_info").fadeIn("slow");
  });

$（文档）.ready（函数（）{
$（“div.thumbs:gt（0）”）.hide（）；//隐藏除第一个div之外的所有div
$（“#拇指链接a”）。单击（函数（e）{
//首先我们把它们全部隐藏起来（为了更好的效果）
$（“div.thumbs”）.hide（）；
if（$（this.attr（“id”）=“all”）
//如果拇指链接的id为“全部”，则在所有div中淡入淡出
$（“.thumbs”）.fadeIn（“慢”）；
其他的
//如果没有，我们只会淡入正确的一个
$（“#”+$（this.attr（“id”）+“#info”）.fadeIn（“slow”）；
});
});
。拇指{
颜色：白色；
}
.gd_大拇指{
显示：无；
}
.艺术大拇指{
显示：无；
}
.图标图像{
宽度：100%；
高度：自动；
不透明度：1；
}
.flex_-one{
宽度：28%；
浮动：左；
位置：相对位置；
背景色：#000；
边框：实心2倍rgb（0,81,88）；
溢出：隐藏；
左缘：4%；
利润率最高：4%；
}



我是GD部门的
我是艺术部的
试试这个片段

它只是检查链接的id是否为
all
，以显示所有链接，如果不是，则继续使用旧代码。我尽量使它尽可能短

编辑：首先，如果你把它们全部隐藏起来，效果会更好

  $('#ThumbLinks a').click(function(e) {
    // first we hide them all (for a nicer effect)
    $("div.thumbs").hide();
    if ($(this).attr("id") == "all")
    // if the ThumbLink's id is 'all' we fade in all the divs 
      $(".thumbs").fadeIn("slow");
    else
    // if not, we fade in just the correct one 
      $("#" + $(this).attr("id") + "_info").fadeIn("slow");
  });


$（文档）.ready（函数（）{
$（“div.thumbs:gt（0）”）.hide（）；//隐藏除第一个div之外的所有div
$（“#拇指链接a”）。单击（函数（e）{
//首先我们把它们全部隐藏起来（为了更好的效果）
$（“div.thumbs”）.hide（）；
if（$（this.attr（“id”）=“all”）
//如果拇指链接的id为“全部”，则在所有div中淡入淡出
$（“.thumbs”）.fadeIn（“慢”）；
其他的
//如果没有，我们只会淡入正确的一个
$（“#”+$（this.attr（“id”）+“#info”）.fadeIn（“slow”）；
});
});
。拇指{
颜色：白色；
}
.gd_大拇指{
显示：无；
}
.艺术大拇指{
显示：无；
}
.图标图像{
宽度：100%；
高度：自动；
不透明度：1；
}
.flex_-one{
宽度：28%；
浮动：左；
位置：相对位置；
背景色：#000；
边框：实心2倍rgb（0,81,88）；
溢出：隐藏；
左缘：4%；
利润率最高：4%；
}



我是GD部门的
我是艺术部的
为什么不能在
#gd#u info
和
#art#u info
上都有一个调用
.show（）
的按钮事件呢？我相信你可以，但不幸的是我不懂Javascript。我试图破译现有的，看看我是否可以写一个按钮事件自己，但我只是刚刚完成学习HTML和CSS。谢谢为什么不能在
#gdu info
和
#art_info
上都有一个调用
.show（）
的按钮事件呢？我相信你可以，但不幸的是，我不懂Javascript。我试图破译现有的，看看我是否可以写一个按钮事件自己，但我只是刚刚完成学习HTML和CSS。谢谢工作得很好。你太棒了，非常感谢。我们这些新手在这里没有帮助就会迷路：）@ShereeWalker:很高兴能帮上忙！工作得很好。你太棒了，非常感谢。我们这些新手在这里没有帮助就会迷路：）@ShereeWalker:很高兴能帮上忙！