如何使用jquery點擊其他圖像時隱藏第一張圖片？

Question

jQuery代碼 - 我點擊圖片時使用圖片作爲標籤，它會給我們帶有顯示內容的圖片上的另一張圖片，但是當點擊另一張圖片時第一張圖片不會隱藏。

Fiddle

$(document).ready(function(){ 

    $('ul.tabs li').click(function(){ 

     var tab_id = $(this).attr('data-tab'); 

     $('ul.tabs li').removeClass('current'); 
     $('.tab-content').removeClass('current'); 

     $(this).addClass('current'); 
     $("#"+tab_id).addClass('current'); 
    }); 
}); 

$(function() { 

    $("#images").find('img').bind("click", function() { 
     var src = $(this).attr("src"); 

     // Check the beginning of the src attribute 
     var state = (src.indexOf("mainslice") === 0) ? 'mainslice' : 'clr'; 

     // Modify the src attribute based upon the state var we just set 
     (state === 'mainslice') ? src = src.replace('mainslice', 'slice') : src = src.replace('slice', 'mainslice'); 
     // Apply the new src attribute value 
     $(this).attr("src", src); 

     $("#images").hide(); 
     $("#images").show(); 

     // This is just for demo visibility 
     // $('body').append('<p>' + $(this).attr('src') + '</p>'); 
    }); 
}); 

這是CSS代碼：

home { 
    background: url(mainslice1.png); 
    width: 98px; 
    height: 45px; 
    line-height: 30px; 
    text-align: center; 
} 

body { 
    font-family: Arial, Helvetica, sans-serif; 
    line-height: 1.3; 
    background: #bdc3c7; 
} 

h1 { 
    font-size: 50px; 
    text-align: center; 
} 

.container { 
    width: 700px; 
    margin: 0 auto; 
} 

.tabs { 
    background: url(slice3.png); 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    background: #2c3e50; 
    border-bottom: 5px #e67e22 solid; 
} 

.tabs li { 
    display: inline-block; 
    margin: 0; 
    /*padding: 10px 20px 5px 20px; 
    cursor: pointer; 

    font-size:1.2em; 
    line-height:2em;*/ 

    color: #FFF; 
} 

.tabs li:hover { 
    background: #d35400; 
} 

.tabs li.current { 
    background: #e67e22; 
    color: #FFF; 
} 

.tab-content { 
    background: url(mainslice1.png); 
    display: none; 
    /*background: #ededed;*/ 

    padding: 15px; 
    line-height: 1.4; 
} 

.tab-content.current { 
    background: url(mainslice1.png); 
    display: inherit; 
} 

Answer 1

您需要先隱藏所有圖像 「#images」 內，然後顯示當前點擊的圖像。

$("img").hide();  //to hide all images 
$(this).show();  // to show currently clicked image 

Answer 2

$('img').click(function() { 
    $(this).addClass('preserved'); // Add class to mark our image. 
    $('img').hide(); // Hide all images. 
    $('.preserved').show(); // Show the marked image. 
}); 

您可能希望縮小img選擇只包括在您需要的容器圖像。