Question

＃step2和＃step2h的css是visibility：hidden 这是我目前的剧本，但我不仅要显示#step，还要显示＃step2h，只需点击一下javascript即可。

<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>

Answer 1

通常你会做这样的事情：

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

您可能遇到的问题是替换step2h的HTML正在消除step2h，因为它位于step2的内部，因此是step2的innerHTML的一部分。

我会为step2内容创建一个step2c div，并将其放在step2h之下。然后用内容的内容替换它的内容，你不会在这个过程中丢失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显示两个隐藏的CSS div

1 个答案: