Question

我有一个对开页面。当用户点击链接＆＃39; design＆＃39; - 显示所有相关的设计图像。当用户点击“艺术”时所有相关的艺术图像都显示出来

我希望拥有的是所有＆＃39;将它们全部组合在一起的按钮。

这两个集合包含在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>

CSS：

.gd_thumbs {
    display:none;
}


.art_thumbs {
    display:none;
}

.icon-image {
    width:100%;
    height:auto;
    opacity:1;
}

.flex_one {
    width:28%;
    float:left;
    position:relative;
    background-color:#000;
    border: solid 2px rgb(0,81,88);
    overflow:hidden;
    margin-left:4%;
    margin-top:4%;
}

的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" ); 


    });  
});

Answer 1

试试这个代码段。

它只是检查链接的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");
  });

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

.thumbs {
  color: white;
}
.gd_thumbs {
  display: none;
}
.art_thumbs {
  display: none;
}
.icon-image {
  width: 100%;
  height: auto;
  opacity: 1;
}
.flex_one {
  width: 28%;
  float: left;
  position: relative;
  background-color: #000;
  border: solid 2px rgb(0, 81, 88);
  overflow: hidden;
  margin-left: 4%;
  margin-top: 4%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
      I'm the GD div
      <img class="icon-image" src="gd.jpg" />
    </div>
  </div>
  <div class="thumbs" id="art_info">
    <div class="flex_one">
      I'm the ART div
      <img class="icon-image" src="art.jpg" />
    </div>
  </div>
</div>

单击时组合两组浮动

1 个答案: