顯示文本塊上單擊圖像塊

Question

我想有一個圖像塊文本塊 上覆蓋文本塊即圖像塊當我在圖像中單擊它應該顯示的文本塊和圖像塊變隱藏（可能會擴展文本塊以顯示內容）。

註文格應該是在圖像的div並單擊它應該顯示和圖像將隱藏圖像隱形：

JAVASCRIPT：

$(function(){ 
    $('.close').click(function(){ 
     $('#textDiv').show(); 
     $('#imageDiv').hide(); 
    }); 
}) 

HTML：

<div id="imageDiv" > 
    <a href="#" class="close">Close <img src="images/close.png" class="close"></a> 
</div> 

<div id="textDiv" style="display:none;">This is the text for the image </div> 

Answer 1

你要這樣，檢查DEMO http://jsfiddle.net/yeyene/gNQVR/1/

JQUERY

$('#imageDiv img').on('click', function(){ 
    $(this).hide(); 
    $(this).siblings('#textDiv').show(); 
}); 
$('#textDiv .close').on('click', function(){ 
    $(this).parent('#textDiv').hide(); 
    $(this).parent().siblings('img').show(); 
}); 

HTML

<div id="imageDiv" > 
    <img src="http://wallpaper-fullhd.com/wp-content/uploads/2013/03/at-the-beach-hd-wallpaper-1920x1200.jpg" class="close" width="200" height="200"> 
    <div id="textDiv"> 
     <a class="close">x</a> 
     This is the text for the image. ...</div> 
</div> 

Answer 2

做這樣的事情：http://jsfiddle.net/rBxeY/

$('div').click(function(){ 
    $('div').toggleClass('active'); 
}); 

HTML

<div id="imageDiv" class="active"> 
    <a href="#" class="close">Close <img src="images/close.png" class="close" /></a> 
</div> 

<div id="textDiv" >This is the text for the image </div> 

CSS

.active{ 
    display: none; 
}