Question

我正在尝试使用两个导航栏（2个div标签）。一个默认显示（nav_bar），另一个在单击其中一个链接（在默认导航栏中）时显示。我想默认隐藏其他导航栏（IT_Spend_Nav）。这是我的代码。默认情况下隐藏了另一个导航栏，但是当我尝试单击另一个（IT Spend）导航栏中的链接时，导航栏会消失。这是我的代码的一部分。我希望只要用户想要进入该特定部分（IT支出），就会显示其他导航栏。请帮忙。感谢。

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

Answer 1

我已更新您的fiddle，以便菜单不再消失

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

我简单地说，当点击一个按钮时，所有菜单都会重置为默认状态，之后我们只显示相关的div（当前div及其父div，以防你有嵌套菜单）。

在html中我唯一改变的是在所有按钮点击时调用showdiv函数时添加父div id（例如第一个按钮为showdiv('IT_Spend_2012', 'IT_Spend_Nav');）

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

1 个答案: