发布于2024-11-04 23:23 阅读(624) 评论(0) 点赞(29) 收藏(5)
<head>
<style>
.b1{
display:none;
visibility: none;
background-color:blue;}
</style>
</head>
<body>
<button class="offer-btn" onclick="openTab('b1');" type="button">DETAILS</button>
<div id="b1" class="containerTab" >
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<h2>Box 1</h2>
<p>some text</p>
</div>
</body>
<script>
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName("containerTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
</script>
我希望当我进入页面时按钮关闭。我尝试将脚本放在头部但结果仍然一样。
这是我进去的时候的图片:https ://i.sstatic.net/6cJ5X.png
当您寻找ID选择器( ) 时,您的 CSS 会使用类选择器( ) 。.b1
#b1
只需替换即可解决问题:
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName("containerTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
#b1 {
display: none;
visibility: none;
background-color: blue;
}
<button class="offer-btn" onclick="openTab('b1');" type="button">DETAILS</button>
<div id="b1" class="containerTab">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<h2>Box 1</h2>
<p>some text</p>
</div>
请注意,如果您愿意#b1
,您也可以使用 ,而不是.containerTab
。
还要注意,你最好使用非侵入式 JavaScript,而不是内联事件处理程序,尽管这对于解决你的问题来说并不是必要的。
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/535602/830f1b8de5e0e08e2abc/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!