2013-04-22 93 views
4

好吧,我有8個縮略圖圖片,我想讓一個滑塊出現,當我點擊其中一個。我試過幾乎所有我知道,在這裏,它是:Javascript - 使div出現並消失

HTML:

<div id="divThumbnails2" class="thumbnails2"> 
    <a href="#" id="Thumb5" > 
     <img src="images/thumbnail_5.png" width="55" height="66" alt="" class="floatleft" /></a> 
    <a href="#" id="Thumb6"> 
     <img src="images/thumbnail_6.png" width="56" height="67" alt="" class="floatleft" 
       style="margin-left: 7px;" /></a> 
    <a href="#" id="Thumb7"> 
     <img src="images/thumbnail_7.png" width="54" height="66" alt="" class="floatleft" 
       style="margin-left: 7px;" /></a> 
    <a href="#" id="Thumb8"> 
     <img src="images/thumbnail_8.png" width="57" height="68" alt="" class="floatleft" 
       style="margin-left: 7px;" /></a> 
</div> 
<div id="divThumbnails" class="thumbnails"> 
    <div id="Thumb1" class="floatleft" > 
     <a href="#"> 
      <img src="images/thumbnail_1.png" width="54" height="65" alt=""/></a> 
    </div> 
    <div id="Thumb2" class="floatleft" style="margin-left: 7px;" > 
     <a href="#"> 
      <img src="images/thumbnail_2.png" width="56" height="66" alt="" /></a> 
    </div> 
    <div id="Thumb3" class="floatleft" style="margin-left: 7px;" > 
     <a href="#"> 
      <img src="images/thumbnail_3.png" width="54" height="66" alt="" /></a> 
    </div> 
    <div class="floatleft" style="margin-left: 7px;" id="Thumb4"> 
     <a href="#"> 
      <img src="images/thumbnail_4.png" width="57" height="68" alt="" /></a> 
    </div> 
</div> 

而且幻燈片:

<div id="slides"> 
    <div class="slides_container" id="SlidesContainer"> 
     <a href="#"><img src="images/slides_1.png" width="408" height="266" alt="" /></a> 
     <a href="#"><img src="images/slides_2.png" width="408" height="272" alt="" /></a> 
     <a href="#"><img src="images/slides_3.png" width="408" height="275" alt="" /></a> 
    </div> 
    <a class="prev" href="#"><img width="28" height="27" alt="Arrow Prev" src="images/slides_left_arrow.png"/></a> 
    <a class="next" href="#"><img width="28" height="27" alt="Arrow Next" src="images/slide_arrow_right.png"/></a> 
    <div class="close_btn" id="Btn_Close"><a href="#"><img src="images/slide_close_btn.png" width="28" height="27" alt="Close" /></a></div> 
</div> 

中的JavaScript:

<script type="text/javascript"> 


    var close = document.getElementById('Btn_Close'); 
    var slides = document.getElementById('slides'); 
    close.onclick = function() { 

     slides.style.display = "none"; 
    }; 
</script> 
<script type="text/javascript"> 

    var thumb1 = document.getElementById('Thumb1'); 
    var slides = document.getElementById('slides'); 
    thumb1.onclick = function() { 

     slides.style.display = "block"; 
    }; 
</script> 
<script type="text/javascript"> 
    var thumb2 = document.getElementById('Thumb2'); 
    var slides = document.getElementById('slides'); 
    thumb2.onclick = function() { 

     slides.style.display = "block"; 
    }; 
</script> 
<script type="text/javascript"> 
    var thumb3 = document.getElementById('Thumb3'); 
    var slides = document.getElementById('slides'); 
    thumb3.onclick = function() { 

     slides.style.display = "block"; 
    }; 
</script> 
<script type="text/javascript"> 
    var thumb4 = document.getElementById('Thumb4'); 
    var slides = document.getElementById('slides'); 
    thumb4.onclick = function() { 

     slides.style.display = "block"; 
    }; 
</script> 
<script type="text/javascript"> 
    var thumb5 = document.getElementById('Thumb5'); 
    var slides = document.getElementById('slides'); 
    thumb5.onclick = function() { 

     slides.style.display = "block"; 
    }; 
</script> 
<script type="text/javascript"> 
    var thumb6 = document.getElementById('Thumb6'); 
    var slides = document.getElementById('slides'); 
    thumb6.onclick = function() { 

     slides.style.display = "block"; 
    }; 
</script> 
<script type="text/javascript"> 
    var thumb7 = document.getElementById('Thumb7'); 
    var slides = document.getElementById('slides'); 
    thumb7.onclick = function() { 

     slides.style.display = "block"; 
    }; 
</script> 
<script type="text/javascript"> 
    var thumb8 = document.getElementById('Thumb8'); 
    var slides = document.getElementById('slides'); 
    thumb8.onclick = function() { 

     slides.style.display = "block"; 
    }; 

</script> 

一切都很好用slides_container當我點擊我的箭頭它改變我的圖片,但我不得不初始設置其顯示親perty來「阻止」,我想將它設置爲「無」,因爲我希望它只在我點擊其中一個縮略圖時纔會出現。

它與關閉按鈕時,我點擊它slides_container div消失(我想我做的事情正確!),但我似乎無法讓它出現時,我點擊其他..: /任何幫助表示讚賞謝謝。

+0

最初必須隱藏'SlidesContainer'或'slides' – 2013-04-22 05:15:39

回答

1

嘗試

<div id="slides" style="display: none"> <!-- set display to none --> 
    <div class="slides_container" id="SlidesContainer"> 
     <a href="#"><img src="images/slides_1.png" width="408" height="266" alt="" /></a> 
     <a href="#"><img src="images/slides_2.png" width="408" height="272" alt="" /></a> 
     <a href="#"><img src="images/slides_3.png" width="408" height="275" alt="" /></a> 
    </div> 
    <a class="prev" href="#"><img width="28" height="27" alt="Arrow Prev" src="images/slides_left_arrow.png"/></a> 
    <a class="next" href="#"><img width="28" height="27" alt="Arrow Next" src="images/slide_arrow_right.png"/></a> 
    <div class="close_btn" id="Btn_Close"><a href="#"><img src="images/slide_close_btn.png" width="28" height="27" alt="Close" /></a></div> 
</div> 

更新 可以簡化腳本很多

<script type="text/javascript"> 
    var slides = document.getElementById('slides'); 

    var close = document.getElementById('Btn_Close'); 
    close.onclick = function() { 
     slides.style.display = "none"; 
    }; 

    function showSlide(){ 
     slides.style.display = "block"; 
    } 

onclick事件添加到thumb元素:

<div id="Thumb1" class="floatleft" onclick="showSlide()"> 
    <a href="#"> 
     <img src="images/thumbnail_1.png" width="54" height="65" alt=""/></a> 
</div> 
2

此功能將您的顯示屬性設置爲與當前所顯示的屬性相反(on vs off)。將「切換」切換到您想要打開/關閉的元素ID。

<script type="text/javascript"> 
    function toggle(){ 
     var off=document.getElementById('toggle'); 
     if (off.style.display == "none") { 
      off.style.display = "block"; 
     } else { 
      off.style.display = "none"; 
     }   
    } 
</script> 

最後,如果你想切換更多的元素,你總是可以創建額外的變量。如果你想要更多的「開關」,然後用另一個onclick動作創建另一個元素,指向另一個切換附加元素ID的函數。 希望有所幫助。

相關問題