无法获取javascript来定位多个元素

时间:2016-03-16 02:21:15

标签: javascript jquery html css

到目前为止,代码适用于前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

0 个答案:

没有答案