到目前为止,代码适用于前2个div但它并没有隐藏我放置的其他代码,而且我仍然坚持如何使javascript为剩余的图像工作。共有4个缩略图,当您点击时,旁边会出现一张大照片
<div class="gallery">
<div class="thumbs float-left">
<div class="subnav float-left">
<ul>
<li class="gallery-btn"><a href="#" title="GALLERY"><img src="_images/shirts/shirt-1-thumb.jpg"></a></li>
<li class="video-btn"><a href="#" title="VIDEOS"><img src="_images/shirts/shirt-2-thumb.jpg"></a></li>
<li class="video-btn"><a href="#" title="VIDEOS"><img src="_images/shirts/shirt-3-thumb.jpg"></a></li>
<li class="video-btn"><a href="#" title="VIDEOS"><img src="_images/shirts/shirt-4-thumb.jpg"></a></li>
</ul>
</div><!-- END OF SUBNAV -->
</div>
<div class="largethumb float-left">
<div class="gallery-area float-right">
<img src="_images/shirts/shirt1.jpg">
</div><!-- END OF AREA 01 -->
<div class="video-area float-right">
<img src="_images/shirts/shirt2.jpg">
</div>
</div>
的Javascript
// HIDE & SHOW ---------------------------------------------------
$(".video-area").hide(); // START BY HIDING THE VIDEOS DIV
// NOTE: USE ID NAMES NOT CLASS NAMES
$(".gallery-btn").click(function () { //CLICK ON THE LINK TO SHOW 1 DIV AND HIDE ANOTHER
$(".gallery-area").fadeIn(500); //SHOW GALLERY // FADE IN OVER 3 SECONDS
$(".video-area").hide(); //HIDE VIDEOS // FADE OUT OVER 3 SECONDS
return false;
}); //closes function
$(".video-btn").click(function () { //CLICK ON THE LINK TO SHOW 1 DIV AND HIDE ANOTHER
$(".video-area").fadeIn(500); //SHOW VIDEOS // FADE IN OVER 3 SECONDS
$(".gallery-area").hide(); //HIDE GALLERY // FADE OUT OVER 3 SECONDS
return false;
}); //closes function
$(".video-btn2").click(function () { //CLICK ON THE LINK TO SHOW 1 DIV AND HIDE ANOTHER
$(".video-area2").fadeIn(500); //SHOW VIDEOS // FADE IN OVER 3 SECONDS
$(".gallery-area").hide(); //HIDE GALLERY // FADE OUT OVER 3 SECONDS
return false;
}); //closes function