Javascript - 使div出现并消失

好吧，我有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消失（我想我做的事情正确！），但我似乎无法让它出现时，我点击其他..： /任何帮助表示赞赏谢谢。

来源

2013-04-22 Joelle Nader

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

尝试

<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>

来源

2013-04-22 05:18:56

此功能将您的显示属性设置为与当前所显示的属性相反（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的函数。希望有所帮助。

来源

2016-04-15 02:55:29 polyphemus11

Javascript - 使div出现并消失

回答

相关问题