Jquery 显示和隐藏图像（切换图像）

假设我有三个默认隐藏的图像。如果单击图标，则会显示图像。 演示在

现在的问题是，图像显示在底部。我想要的是在相应文本的位置显示它。同时，文本和小图标将被隐藏。 例如，单击文本1的缩略图，图像显示在顶部。文本1和第一个放大镜缩略图被隐藏

---

谢谢您的帮助。

稍微更改一下标记：

<div class="slides">
    <div class="slide">
        <p>text 1<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
        <img class="pic" src="http://www.moosemash.de/images/img81.jpg">        
    </div>
    <div class="slide">    
        <p>text 2<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>        
        <img class="pic" src="http://www.moosemash.de/images/img82.jpg">        
    </div>
    <div class="slide">    
        <p>text 3<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>        
        <img class="pic" src="http://www.moosemash.de/images/img83.jpg">        
    </div>    
</div>​

？

Html:

---

下面的方法怎么样？使用更少的javascript。

html

<div class="content">
    <div class="slide">
        <p>text 1<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
        <img class="slideImage" src="http://www.moosemash.de/images/img81.jpg">
    </div>
    <div class="slide">
        <p>text 2<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
        <img class="slideImage" src="http://www.moosemash.de/images/img82.jpg">
    </div>
    <div class="slide">
        <p>text 3<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
        <img class="slideImage" src="http://www.moosemash.de/images/img83.jpg">
    </div>
</div>
​

css

 $('.content p img').on("click", function(){
     $('.slide').removeClass('active');
     $(this).closest('.slide').addClass('active');
 })​;

.slideImage{
    display: none;
    position: "absolute",
    left: "0",
    top: "0",
}

.active .slideImage{
    display: block;
}

.active > *:not(.slideImage) {
    display: none;
}​

<div class="content">
    <div class="slide">
        <p>text 1<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
        <img class="slideImage" src="http://www.moosemash.de/images/img81.jpg">
    </div>
    <div class="slide">
        <p>text 2<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
        <img class="slideImage" src="http://www.moosemash.de/images/img82.jpg">
    </div>
    <div class="slide">
        <p>text 3<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
        <img class="slideImage" src="http://www.moosemash.de/images/img83.jpg">
    </div>
</div>
​

 $('.content p img').on("click", function(){
     $('.slide').removeClass('active');
     $(this).closest('.slide').addClass('active');
 })​;

.slideImage{
    display: none;
    position: "absolute",
    left: "0",
    top: "0",
}

.active .slideImage{
    display: block;
}

.active > *:not(.slideImage) {
    display: none;
}​