7

当我单击任何链接时，会显示相应的 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>
4

4 回答 4

12

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

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';
}
于 2012-05-06T07:00:11.377 回答
1

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

function showdiv( id ) { 
    if( showdiv.div ) { 
        showdiv.div.style.display = 'none';
    }
    showdiv.div = document.getElementById(id);
    showdiv.div.style.display = 'block';
}
于 2017-01-25T14:18:12.507 回答
0

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

您还可以将其组织为两个函数 hidealldivs()，它将隐藏所有 div 和您当前的 showdiv()，它将显示选中。

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

onclick="hidealldivs(); showdiv('eating')"
于 2012-05-06T03:57:39.083 回答
0

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

.patientinfodivs {
    display: none;
}

<div id="firstimpression" class="patientinfodivs" style="display: none;">
于 2012-05-06T04:00:51.150 回答