这看起来很简单,但我不知道我在做什么.我有2个单选按钮,根据选择哪一个,div的内容会发生变化.现在我在父div中有2个div但它只隐藏一个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";
    }
}

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