假设我有三个默认隐藏的图像。如果我单击该图标,则会显示图像。演示在jsfiddle。
现在的问题是图像显示在底部。我想要的是将它显示在相应文本的位置。同时,文字和小图标将被隐藏。例如,单击文本 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>
和js:
$('.pic').hide();
$('.slide').on("click", function(event){
$('.slide').each(function(){
if(this == event.currentTarget){
$('p', this).toggle();
$('.pic', this).fadeToggle();
}else{
$('p', this).show();
$('.pic', this).hide();
}
});
})
这是你的意图吗?
下面的方法怎么样?使用更少的 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>
js
$('.content p img').on("click", function(){
$('.slide').removeClass('active');
$(this).closest('.slide').addClass('active');
});
css
.slideImage{
display: none;
position: "absolute",
left: "0",
top: "0",
}
.active .slideImage{
display: block;
}
.active > *:not(.slideImage) {
display: none;
}
html:
<div class="content">
<p>text 1<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
<img class="slideshow" src="http://www.moosemash.de/images/img81.jpg">
<p>text 2<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
<img class="slideshow" src="http://www.moosemash.de/images/img82.jpg">
<p>text 3<img src="http://www.moosemash.de/images/magnifier.jpg" height="27" width="30"></p>
<img class="slideshow" src="http://www.moosemash.de/images/img83.jpg">
</div>
Javascript:
$('.content .slideshow').hide();
$('.content p img').on("click", function() {
var index = $(".content p img").index(this);
$("img.current").removeClass("current").hide();
$("p.current").removeClass("current").show();
var p = $(this).parent();
var i = p.next();
p.addClass("current").hide();
i.addClass("current").show();
});