如何使用javascript更改div内容
[英]How to change div contents with javascript
问题描述
This seems simple but I don't know what I'm doing really. 
这看起来很简单，但我不知道我在做什么。 I have 2 radio buttons and depending on which one is selected the contents of a div will change. 我有2个单选按钮，根据选择哪一个，div的内容会发生变化。 Right now I have 2 divs inside a parent div but it would just hide one div and show the other. 现在我在父div中有2个div但它只隐藏一个div并显示另一个div。 This wouldn't be bad if they didn't take up space even when they're invisible. 如果即使它们看不见也没有占用空间，这也不错。
HTML: 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: 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";
}
}
So I'd like to have it so only one div is visible at a time depending on which radio button is checked, and don't have them take up space when they're not in the div. 所以我想拥有它，因此一次只能看到一个div，具体取决于选中哪个单选按钮，并且当它们不在div中时不要占用空间。 Thanks! 谢谢！
5 个解决方案
解决方案1
3 已采纳 2015-06-29 18:18:16
If you want those divs to stop taking space, you have to use display:none instead of visibility:hidden, change your function to 如果您希望这些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";
}
}
Working plnkr: http://plnkr.co/edit/H4C9C7dAD324qJUgESMF?p=preview 工作plnkr： http ：//plnkr.co/edit/H4C9C7dAD324qJUgESMF？p = preview
解决方案2
2 2015-06-29 18:20:22
visibility property will always use the space whenever it is hidden. visibility属性将始终在隐藏时使用该空间。
Better approach would be to use display property. 更好的方法是使用display属性。
Something like this: 像这样的东西：
document.getElementById("div2").style.display= "none"; //similar to hidden
document.getElementById("div1").style.display= "block"; // visible
解决方案3
1 2015-06-29 18:20:42
您正在使用visibility: hidden来隐藏div，隐藏它们但让它们在浏览器中占用空间，尝试使用display属性，而不是使用hidden use none ，而不是使用visible use block 。
解决方案4
1 2015-06-29 18:28:16
You have to understand first the difference between the display and visibility properties. 您必须首先了解display和visibility属性之间的区别。
display - none - when you do display none that means whole element from DOM will hide with its physical existence in DOM.So, there will be no space allocation for that element in DOM. display - none - 当你display none ，意味着来自DOM的整个元素将隐藏其在DOM中的物理存在。因此，DOM中的该元素将没有空间分配。
Visibility - hidden - In this case , you are hiding only that element but physically that element is present in that space.So, space will be allocate that element. 可见性 - 隐藏 - 在这种情况下，您只隐藏该元素，但物理上该元素存在于该空间中。因此，空间将分配该元素。
解决方案5
1 2015-06-29 18:29:34
Using just one div and change content 只使用一个div并更改内容
HTML 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 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.