javascript - 需要 Javascript 显示两个隐藏的 css div

标签 javascript html show using

#step2和#step2h的CSS是visibility:hidden 这是我当前的脚本,但我不仅想用 JavaScript 一键显示 #step,还想显示 #step2h。

<body>
<center>
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div id="contenth">
<h1 id=>content header</h1>
</div>
content
<a href="#" onclick="changeDiv(1)">Menu 1</a> ///change to other div
<a href="#" onclick="changeDiv(2)">Menu 2</a>
<script>
function changeDiv(i){
if(i==1)
document.getElementById("content").innerHTML = document.getElementById("step2").innerHTML;
else
document.getElementById("step2").innerHTML = document.getElementById("content").innerHTML;
}
</script>
</div>
</div>
<div id="step2"> // Showed on click
<div id="step2h">//want to show this as well
<h1>STEP 2 Header</h1>
</div>
<h2>Step 2 Content</h2>

</div>
</center>
</body>

最佳答案

通常你会做这样的事情:

document.getElementById("step2h").style.visibility='visible';

您可能面临的问题是,替换step2的HTML会清除step2h,因为它位于step2内部,因此是step2的innerHTML的一部分。

我会为step2内容创建一个step2c div,并将其放在step2h下面。然后将其内容替换为 content 的内容,并且在此过程中您不会丢失step2h。像这样的事情:

<div id="step2">
    <div id="step2h">
        <h1>STEP 2 Header</h1>
    </div>
    <div id="step2c">
        <h2>Step 2 Content</h2>
    </div>
</div>

然后执行以下操作:

document.getElementById("step2c").innerHTML = document.getElementById("content").innerHTML;

关于javascript - 需要 Javascript 显示两个隐藏的 css div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13899549/

相关文章:

javascript - polymer 观察器未被解雇

javascript - 从 google chrome 浏览器控制台在 Netflix 上设置视频播放速率

php - 使用 Bootstrap 网格的错误位置

javascript - 单击按钮重置角色倒计时

javascript - 在表格单元格悬停时显示/隐藏 DIV (javascript)

javascript - jquery 上的多个显示和隐藏帖子

jQuery:悬停时仅显示一个,而不是全部

javascript - 将 MySQL 数据库中的 UTC 日期时间转换为客户端时区,无需任何库

JavaScript = "js"?这是有效的吗?

javascript - 在 ie11 企业上 Bootstrap