javascript - 如何用javascript改变div的内容

Question

这看起来很简单，但我不知道我到底在做什么。我有 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 中时不要让它们占用空间。谢谢!

Answer 1

如果你想让那些 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";
    }
}

工作计划:http://plnkr.co/edit/H4C9C7dAD324qJUgESMF?p=preview