javascript - 简单的 div onclick 显示 javascript

Question

当我点击任何链接时，相应的 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>

Answer 1

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

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