Question

这看似简单，但我不知道自己在做什么。我有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。谢谢！

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";
    }
}

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

Answer 2

visibility属性将始终在隐藏时使用该空间。

更好的方法是使用display属性。

这样的事情：

document.getElementById("div2").style.display= "none"; //similar to hidden
document.getElementById("div1").style.display= "block"; // visible

Answer 3

您正在使用visibility: hidden隐藏div，隐藏它们但让它们在浏览器中占用空间，而是使用display属性，而不是使用hidden使用{{1而不是使用none使用visible。

Answer 4

请看一下此链接http://www.w3schools.com/css/css_display_visibility.asp。这清楚地解释了可见性和显示之间的区别

Answer 5

您必须先了解display和visibility属性之间的差异。

display - none - 执行display none时，意味着来自DOM的整个元素将隐藏其在DOM中的物理存在。在DOM中，该元素不会有空间分配

可见性 - 隐藏 - 在这种情况下，您只隐藏该元素，但物理上该元素存在于该空间中。因此，空间将分配该元素。

有关详细信息，请关注this

Answer 6

只使用一个div并更改内容

DEMO

HTML

<body onload='chooseDiv();'>
<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"></div>
</div>

<div style='display:none'>
    <div id='c1'><span>TEST 1</span><img src='http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=hiFacebook'/></div>
     <div id='c2'><span>TEST 2</span><img src='http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg' /></div>
</div>

</body>

JS

   function chooseDiv() {
    var div = document.getElementById("div1");
    var msg =  document.getElementById("c1").innerHTML;

    if (!document.getElementById("selectionDiv1").checked) {
        msg = document.getElementById("c2").innerHTML;
    }

    div.innerHTML = msg;
}

如何使用javascript更改div内容

6 个答案: