javascript - 使 div 出现和消失

Question

我有 8 张缩略图，我想在单击其中一张时显示一个 slider 。我几乎尝试了我所知道的一切，这里是:

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 一切正常，它改变了我的图片，但我必须首先将它的显示属性设置为“block”，我想将它设置为“none”，因为我希望它只在我点击时出现在其中一张缩略图上。

当我点击它时它与关闭按钮一起工作 slides_container div 消失了(我想我做对了)但是当我点击时我似乎无法让它出现其他。感谢您的帮助。

Answer 1

此函数会将您的显示属性设置为与当前相反的状态(开与关)。将“切换”更改为您要打开/关闭的元素 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 Action 创建另一个元素，指向另一个切换附加元素 ID 的函数。希望对您有所帮助。