Javascript - 让div出现并消失

时间:2013-04-22 05:04:20

标签: javascript html javascript-events

好吧所以我有8张缩略图,我想在点击其中一张时出现一个滑块。我几乎尝试了所有我知道的东西,现在是:

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>

一切都很好用slide_container当我点击我的箭头它改变了我的图片,但我必须首先将其显示属性设置为“阻止”,我想将其设置为“无”,因为我希望它只在我点击时出现其中一张缩略图。

当我点击它时,它与关闭按钮一起工作slide_container div消失了(我想我正在做正确的事!)但是当我点击其他人时我似乎无法让它出现..:/感谢任何帮助。

2 个答案:

答案 0 :(得分:2)

此功能会将您的显示属性设置为与当前相反的格式(开启与关闭)。将“切换”更改为您要打开/关闭的元素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的函数。 希望有所帮助。

答案 1 :(得分: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>