Javascript - 使 div 出现和消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16139756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - Making a div appear and disappear
提问by Joelle Nader
okay so I have 8 thumbnail pictures and I wanna make a slider appear when i click on one of them . I tried pretty much everything I know and here it is :
好的，所以我有 8 张缩略图，当我点击其中一张时，我想让一个滑块出现。我几乎尝试了我所知道的一切，这里是：
HTML :
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>
And the slides :
和幻灯片：
<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>
The JavaScript :
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>
everything's fine with the slides_container when i click my arrows it changes my picture but i have to initially set its display property to "block" and i wanna set it to 'none' cause i want it to appear only when i click on one of the thumbnail pictures.
当我单击箭头时，slides_container 一切正常，它会更改我的图片，但我必须最初将其显示属性设置为“阻止”，并且我想将其设置为“无”，因为我希望它仅在我单击其中一个时出现缩略图。
it works with the close button when i click on it the slides_container div disappears ( I guess i'm doing something right ! ) but I can't seem to get it to appear when i click on the others ..:/ any help is appreciated thank you.
当我点击它时，它与关闭按钮一起工作，slides_container div 消失了（我想我在做一些正确的事情！）但是当我点击其他人时，我似乎无法让它出现 ..:/ 任何帮助是感谢感谢。
回答by polyphemus11
This function will set your display property to the opposite of what it currently is (on vs off). Change 'toggle' to your element id that you want to toggle on/off.
此函数会将您的显示属性设置为与当前相反（打开与关闭）。将“toggle”更改为要打开/关闭的元素 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>
Lastly, if you want to toggle more elements, you can always create additional variables. If you want more "switches", then create another element with another onclick action, pointing to another function that toggles the additional element id. Hope that helps.
最后，如果您想切换更多元素，您可以随时创建其他变量。如果你想要更多的“开关”，那么用另一个 onclick 动作创建另一个元素，指向另一个切换附加元素 id 的函数。希望有帮助。
回答by Arun P Johny
Try
尝试
<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>
UpdateYou can simplify the script a lot
更新您可以大大简化脚本
<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";
}
Add an onclickevent to the thumbelements:
onclick给thumb元素添加一个事件：
<div id="Thumb1" class="floatleft" onclick="showSlide()">
<a href="#">
<img src="images/thumbnail_1.png" width="54" height="65" alt=""/></a>
</div>
