简单的 div onclick 显示 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10467943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
simple div onclick show javascript
提问by user813032
when I click on any link the correspoding div shows up but when I click the next link, the newly clicked dive shows up as well as the previously clicked. I would like the previos div to hide. NEW to development please some one help me........
当我点击任何链接时，相应的 div 会显示出来，但是当我点击下一个链接时，新点击的潜水和之前点击的一样。我想隐藏以前的 div。新开发请有人帮助我......
this is the html code for links:
这是链接的html代码：
<a class="hide" onclick="showdiv('firstimpression'); " href="#">First Impression</a>
<a class="hide" onclick="showdiv('speaking'); " href="#">Speaking</a>
<a class="hide" onclick="showdiv('eating'); " href="#">Eating</a>
<a class="hide" onclick="showdiv('taste'); " href="#">Taste</a>
<a class="hide" onclick="showdiv('saliva'); " href="#">Saliva</a>
<a class="hide" onclick="showdiv('cleaning');" href="#">Cleaning</a>
<a class="hide" onclick="showdiv('nighttime');" href="#">Night Time</a>
<a class="hide" onclick="showdiv('singledenture');" href="#">Single Denture</a>
<a class="hide" onclick="showdiv('soreness');" href="#">Soreness</a>
<a class="hide" onclick="showdiv('burning');" href="#">Burning</a>
<a class="hide" onclick="showdiv('adapting');" href="#">Adapting</a>
<a class="hide" onclick="showdiv('futureconsideration');" href="#">Future Consideration</a>
<a class="hide" onclick="showdiv('conclusion');" href="#">Conclusion</a>
these are the divs:
这些是div：
<div id="firstimpression" class="patientinfodivs">
<div id="speaking" class="patientinfodivs">
.....and so on
.....等等
Javascript code
Javascript代码
<script type="text/javascript">
function showdiv(id){
document.getElementById(id).style.display = "block";
}
</script>
回答by Nick
As much as I hate creating global variables, they just come in so handy sometimes...
尽管我讨厌创建全局变量，但它们有时会派上用场......
var _hidediv = null;
function showdiv(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
This will prevent you from needlessly searching through divs to find the one you should hide.
这将防止您不必要地搜索 div 以找到您应该隐藏的那个。
Edit: Expanding upon @StevenRoose's suggestion:
编辑：扩展@StevenRoose 的建议：
var _targetdiv = null;
function showdiv(id) {
if(_targetdiv)
_targetdiv.style.display = 'none';
_targetdiv = document.getElementById(id);
_targetdiv.style.display = 'block';
}
回答by Matthew Wilcoxson
Here's a version without using a global (other than the function itself). The variable is held on the function object:
这是一个不使用全局（函数本身除外）的版本。变量保存在函数对象上：
function showdiv( id ) {
if( showdiv.div ) {
showdiv.div.style.display = 'none';
}
showdiv.div = document.getElementById(id);
showdiv.div.style.display = 'block';
}
回答by DaneSoul
You need in your showdiv() first make all your elements display = "none"; And then make selected element display = "block";
你需要在你的 showdiv() 首先让你的所有元素 display = "none"; 然后使选中的元素 display = "block";
You can also organize it in two functions hidealldivs(), which will hide all divs and your current showdiv(), which will show selected.
您还可以在两个函数 hidealldivs() 中组织它，这将隐藏所有 div 和您当前的 showdiv()，它将显示已选择。
Then onClick call both of them one after another
然后 onClick 一个接一个地调用它们
onclick="hidealldivs(); showdiv('eating')"
回答by iambriansreed
You need to initially hide your divs. Either in the StyleSheet or inline.
您需要最初隐藏您的 div。在样式表中或内联中。
.patientinfodivs {
display: none;
}
<div id="firstimpression" class="patientinfodivs" style="display: none;">
