在各組圖像之間切換？

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/