在各组图像之间切换？

Question

好吧，我正在设计一个使用Skeleton网格系统的简单网站。下面是HTML代码：

<div id="gallery" class="nine columns"> 
    <div id="thumb1" class="three columns"> 
     <a id="cglink" href="#"> 
      <img src="images/cg1.jpg"> 
     </a> 
    </div> 
    <div id="thumb2" class="three columns"> 
     <a id="balink" href="#"> 
      <img src="images/ba1.jpg"> 
     </a> 
    </div> 
    <div id="thumb3" class="three columns"> 
     <a id="l7link" href="#"> 
      <img src="images/l71.jpg"> 
     </a> 
    </div> 
</div> 

而CSS：

#gallery { 
    border-top: 1px solid; 
    border-bottom: 1px solid; 
    margin: 0; 
} 

#gallery .three.columns { 
    padding: 19.3px 0 13.5px 0; 
} 

#thumb1 { 
    margin-left: 0; 
} 

#thumb2 { 
    margin: 0 10px 0 10px; 
} 

#thumb3 { 
    margin-right: 0; 
} 

.three.columns img { 
    width: 100%; 
    opacity: 1; 
    -webkit-transition: opacity .5s ease-in; 
} 

.three.columns img:hover { 
    opacity: .7; 
} 

所以我想要做的是，当我点击图像之一，它会触发一个隐藏的股利。在这里的HTML是这样的：

<div id="cg" class="nine columns"> 
    <img src="images/cg1.jpg"> 
</div> 
<div id="ba" class="nine columns"> 
    <img src="images/ba1.jpg"> 
</div> 
<div id="l7" class="nine columns"> 
    <img src="images/l71.jpg"> 
</div> 

所以我有基本的切换脚本目前应用。

$('#cg, #ba, #l7').hide(); 
$('#cglink').click(function() { 
    $('#cg').toggle('fade', 400); 
}); 
$('#balink').click(function() { 
    $('#ba').toggle('fade', 400); 
}); 
$('#l7link').click(function() { 
    $('#l7').toggle('fade', 400); 
}); 

所以我目前的工作。但是，我发现这个错误，如果我切换，比如说，#cg，然后尝试切换#ba，#ba会出现在下面。它不是很漂亮。所以我想要做的是这样的：当我点击#cglink，然后决定点击#balink时，应该隐藏#cg div并且div会显示#ba。我不确定我是否有道理，如果我没有，只是评论，我会进一步阐述。

我认为人们设置标志来检查另一个div是否已经打开，以便它可以隐藏。不过，我仍然是初学者，所以我需要帮助。

Answer 1

向你的锚上添加一个普通的识别符，就像这样;

<div id="gallery" class="nine columns"> 
    <div id="thumb1" class="three columns"> 
     <a href="#" id="cglink" class="toggle_btn"><img src="images/cg1.jpg"></a> 
    </div> 
    <div id="thumb2" class="three columns"> 
     <a href="#" id="balink" class="toggle_btn"><img src="images/ba1.jpg"></a> 
    </div> 
    <div id="thumb3" class="three columns"> 
     <a href="#" id="l7link" class="toggle_btn"><img src="images/l71.jpg"></a> 
    </div> 
</div> 

随后的元素你切换：

<div id="cg" class="nine columns toggle_img"> 
    <img src="images/cg1.jpg"> 
</div> 
<div id="ba" class="nine columns toggle_img"> 
    <img src="images/ba1.jpg"> 
</div> 
<div id="l7" class="nine columns toggle_img"> 
    <img src="images/l71.jpg"> 
</div> 

然后切换：

$('#cg, #ba, #l7').hide(); 

$('a.toggle_btn').on('click', function() { 
    var elem = $('#' + this.id.replace('link','')); 

    $('.toggle_img').not(elem).fadeOut(400); 
    elem.toggle('fade', 400); 
}); 

记住下一次使用类可以让你的目标在同一时间多个元素。

Answer 2

一个解决方案是创建一个函数来处理元素的显示。您的所有点击事件都引用这个功能，像这样

$('#cglink').click(function() {showElement('#cg')); 
$('#balink').click(function() {showElement('#ba')}); 
$('#l7link').click(function() {showElement('#l7')}); 

你showElement功能可以确保所有的元素都是隐藏的，只有在必要的一个褪色。

function showElement(whichElement) { 
    $("#gallery div").stop().hide() //hide all elements. we call stop() to stop any fading 
    $(whichElement).fadeIn(); 
} 

这是基本的例子。你也可以在开始时隐藏所有元素，调用没有参数的函数。例如：showElement（）。我也建议你通过添加和删除类而不是通过JS动画来使用css3进行淡入淡出。

编辑：我很快创建了一个更快的方法JS小提琴。您不必通过使用href属性为每个按钮手动添加事件。

http://jsfiddle.net/EbGCx/