显示文本块上单击图像块

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; 
}