简单的 div onclick 显示 javascript答案

【问题标题】：simple div onclick show javascript简单的 div onclick 显示 javascript
【发布时间】：2012-05-15 03:01:57
【问题描述】：

当我点击任何链接时，相应的 div 就会出现但是当我点击下一个链接时，新点击的潜水和之前点击的一样都会出现。我想隐藏 previos div。新开发的请有人帮助我........

这是链接的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>

这些是 div：

<div id="firstimpression" class="patientinfodivs">
<div id="speaking" class="patientinfodivs">

.....等等

Javascript 代码

<script type="text/javascript">
function showdiv(id){
document.getElementById(id).style.display = "block";
}
</script>

【问题讨论】：

标签： javascript html hide show

【解决方案1】：

你需要在你的 showdiv() 中首先让你的所有元素 display = "none"; 然后让选中的元素 display = "block";

你也可以把它组织成两个函数 hidealldivs()，它会隐藏所有的 div 和你当前的 showdiv()，它会显示选中。

然后onClick一个接一个地调用它们

onclick="hidealldivs(); showdiv('eating')"

【讨论】：

您能否在脚本标签之间为您的 onclick 提供一个代码？谢谢

【解决方案2】：

您最初需要隐藏 div。在样式表或内联中。

.patientinfodivs {
    display: none;
}

<div id="firstimpression" class="patientinfodivs" style="display: none;">

【讨论】：

【解决方案3】：

尽管我讨厌创建全局变量，但它们有时会派上用场...

var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}

这将防止你不必要地搜索 div 来找到你应该隐藏的那个。

编辑：根据@StevenRoose 的建议进行扩展：

var _targetdiv = null;
function showdiv(id) {
    if(_targetdiv)
        _targetdiv.style.display = 'none';
    _targetdiv = document.getElementById(id);
    _targetdiv.style.display = 'block';
}

【讨论】：

@user813032 如果它解决了你的问题，你应该接受这个答案
@Nick，您为什么选择将该函数保留为全局变量而不是对 div 的引用？在这种情况下，该函数将以 if(_shownDiv) { _shownDiv.style.display = 'none'; } 开头
@StevenRoose，没有特别的原因。我将在我的答案中附加您建议的扩展版本。

【解决方案4】：

这是一个不使用全局变量（函数本身除外）的版本。变量保存在函数对象上：

function showdiv( id ) { 
    if( showdiv.div ) { 
        showdiv.div.style.display = 'none';
    }
    showdiv.div = document.getElementById(id);
    showdiv.div.style.display = 'block';
}

【讨论】：