简单的div onclick显示javascript

Question

当我点击任何链接时，相应的div会显示出来，但是当我点击下一个链接时，新点击的div以及之前点击的div都会显示出来。我希望之前的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>

- user813032

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

- Nick

---

@Nick，为什么你选择将该函数保留为全局变量而不是对div的引用？如果这样做，该函数将以if(_shownDiv) { _shownDiv.style.display = 'none'; }开头。 - Steven Roose

@StevenRoose，没有特别的原因。我会在我的答案中附上你建议的扩展版本。 - Nick

Answer 2

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

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

- Matthew Wilcoxson

Answer 3

在你的showdiv()函数中，你需要先将所有元素的display属性设置为"none"；然后将选定的元素的display属性设置为"block"。

你还可以将它组织成两个函数：hidealldivs()函数将隐藏所有的div元素，而你当前的showdiv()函数将显示所选元素。

然后，在onClick事件中依次调用这两个函数。

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

- DaneSoul

---

请您提供一个在script标签之间的onclick代码吗？谢谢。 - frank17

Answer 4

你需要最初隐藏你的

元素。可以在样式表或内联样式中完成。

.patientinfodivs {
    display: none;
}

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

- iambriansreed