Javascript 单击另一个div中的链接时有条件地显示/隐藏div

我试图有两个导航栏（2个div标签）。一个默认显示（导航栏），另一个在单击其中一个链接（默认导航栏）时显示。我想在默认情况下隐藏另一个导航栏（IT_expense_nav）。这是我的密码。默认情况下，另一个导航栏是隐藏的，但是当我尝试单击另一个导航栏中的链接时，导航栏消失了。这是我代码的一部分。我希望其他导航栏显示，只要用户希望在该特定部分（它花费）。请帮忙。谢谢

<div id="nav_bar">
<ul>
<li><a href="#none" onclick="showdiv('IT_Spend_Nav');">IT Spend</a></li>
<li><a href="#none" onclick="showdiv('IT_Assessment_Nav');">Assessments</a></li>
<li><a href="#none" onclick="showdiv('IT_Information_Nav');">Information</a></li>
</ul>
</div>     

<div id = "IT_Spend_Nav" hidden="true">
<ul> 
<li><a href="#none" onclick="showdiv('IT_Spend_2012');">2012</a></li>
<li><a href="#none" onclick="showdiv('IT_Spend_2012');">2013</a></li>
<li><a href="#none" onclick="showdiv('IT_Spend_2012');">2014</a></li>
<li><a href="#none" onclick="showdiv('IT_Spend_2012');">2015</a></li>
<li><a href="#none" onclick="showdiv('IT_Spend_2012');">IT Spend Growth Trend</a>   </li>   
<li><a href="#none" onclick="showdiv('IT_Spend_2012');">IT OPEX/CAPEX Summary</a></li>  
</ul>
</div> 

javascript

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

javascript
var_targetdiv=null；
函数showdiv（id）{
如果（_targetdiv）
_targetdiv.style.display='none'；
_targetdiv=document.getElementById（id）；
_targetdiv.style.display='block'；
}

我已经更新了您的菜单，使菜单不再消失

JavaScript代码如下所示：

var _menus = [{
    id : 'nav_bar',
    hidden: false
}, {
    id : 'IT_Spend_Nav',
    hidden : true
}];

function reset() {
    for (var i=0; i< _menus.length; i++) {
       var elem = _menus[i],
           currDiv = document.getElementById(elem.id);
       currDiv.hidden = elem.hidden;
    }
}

function showdiv(id, parentId) {
    var _targetdiv = document.getElementById(id);
    var _parentDiv = document.getElementById(parentId);

    // reset to default state
    reset();

    // show current menu. make sure parent is also visible
    if (_parentDiv) {
        _parentDiv.hidden = false;
    }

    if (_targetdiv) {
        _targetdiv.hidden = false;   
    }
}

var\u菜单=[{
id:‘导航栏’，
隐藏：假
}, {
id:“IT_-Spend_-Nav”，
隐藏：真的
}];
函数重置（）{
对于（变量i=0；i<\u.length；i++）{
变量元素=_菜单[i]，
currDiv=document.getElementById（elem.id）；
currDiv.hidden=元素隐藏；
}
}
函数showdiv（id，parentId）{
var\u targetdiv=document.getElementById（id）；
var\u parentDiv=document.getElementById（parentId）；
//重置为默认状态
重置（）；
//显示当前菜单。确保父菜单也可见
如果（_parentDiv）{
_parentDiv.hidden=false；
}
如果（_targetdiv）{
_targetdiv.hidden=false；
}
}

我只是让所有菜单在单击按钮时都重置为默认状态，之后我们只显示相关的div（如果有嵌套菜单，则显示当前div及其父div）

---

在html中，我唯一更改的是在所有按钮单击时调用showdiv函数时添加父div id（例如

showdiv（'IT_-Spend_2012'，'IT_-Spend_-Nav'）；

作为第一个按钮）

你能用它做一个标记吗？看起来像

targetDiv.style。display

总是设置为

block

。您必须将

targetDiv

设置为从一开始就引用元素，然后检查

display

的值，而不是

targetDiv

本身。感谢您回复Muzsi。但我不擅长编码。上面看到的javascript代码是从stackoverflow复制的。你能告诉我怎么做吗？我用你的示例代码做了一个修改-它似乎工作得很好（看一看），你的JavaScript代码放在HTML文档中的什么位置？