按钮展开显示在页面上，尽管在单击按钮本身之前应该将其隐藏
发布于2024-11-04 23:23 阅读(614) 评论(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个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力