这看起来很简单,但我不知道我到底在做什么。我有 2 个单选按钮,根据选择的是哪个,div 的内容会发生变化。现在我在父 div 中有 2 个 div,但它只会隐藏一个 div 并显示另一个。如果它们即使在隐形时也不占用空间,那也不错。
HTML:
<div>
<form role="form">
<div>
<div class="radio" id="radioSelection" onchange="chooseDiv()">
<label>
<input type="radio" name="optradio" id="selectionDiv1" checked />Choose Div1
</label>
<label>
<input type="radio" name="optradio" id="selectionDiv2" />Choose Div2
</label>
</div>
</div>
</form>
</div>
<div id="parentDiv">
<div id="div1">You're Awesome!</div>
<div id="div2">Everybody loves you!</div>
</div>
JavaScript:
function chooseDiv() {
if (document.getElementById("selectionDiv1").checked) {
document.getElementById("div2").style.visibility = "hidden";
document.getElementById("div1").style.visibility = "visible";
} else {
document.getElementById("div2").style.visibility = "visible";
document.getElementById("div1").style.visibility = "hidden";
}
}
因此,我希望根据选中的单选按钮一次只显示一个 div,并且当它们不在 div 中时不要让它们占用空间。谢谢!
最佳答案
如果你想让那些 div 停止占用空间,你必须使用 display:none 而不是 visibility:hidden,将你的函数更改为
function chooseDiv() {
if (document.getElementById("selectionDiv1").checked) {
document.getElementById("div2").style.display = "none";
document.getElementById("div1").style.display = "block";
} else {
document.getElementById("div2").style.display = "block";
document.getElementById("div1").style.display = "none";
}
}
关于javascript - 如何用javascript改变div的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31122718/