Блог

Главная - Вопросы по программированию - отображение / скрытие div условно при нажатии ссылки в другом div

отображение / скрытие div условно при нажатии ссылки в другом div

#javascript #css #html #nav #navigationbar

#javascript #css #HTML #навигационная система #панель навигации

Вопрос:

Я пытаюсь создать две панели навигации (2 тега div). Один отображается по умолчанию (nav_bar), а другой отображается при нажатии на одну из ссылок (в навигационной панели по умолчанию). Я хочу скрыть другую панель навигации (IT_Spend_Nav) по умолчанию. Вот мой код. Другая панель навигации по умолчанию скрыта, но когда я пытаюсь щелкнуть ссылки в другой панели навигации (IT Spend), панель навигации исчезает. Вот часть моего кода. Я хочу, чтобы другая панель навигации отображалась до тех пор, пока пользователь хочет находиться в этом конкретном разделе (IT Spend). Пожалуйста, помогите. Спасибо.

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

Комментарии:

1. можете ли вы с этим поработать ?

2. Похоже targetDiv.style.display , всегда установлено значение block . Вы должны установить targetDiv ссылку на элемент с самого начала, затем проверить значение display вместо targetDiv самого себя.

3. спасибо за ответ Музси. Но я не силен в кодировании. Код javascript, который вы видите выше, был скопирован из stackoverflow. Можете ли вы сообщить мне, как это сделать.

4. Я сделал скрипку, используя ваш пример кода — jsfiddle.net/pRNZ3 Кажется, он работает нормально (взгляните), где ваш код JavaScript помещен в HTML-документ?

Ответ №1:

Я обновил вашу скрипку, чтобы меню больше не исчезали

Код 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;   
    }
}

Я просто сделал так, чтобы все меню возвращались к своим состояниям по умолчанию при нажатии кнопки, после чего мы показываем только соответствующие divs (текущий div и его родительский div, если у вас есть вложенные меню).

В html единственное, что я изменил, это добавить также родительский идентификатор div при вызове функции showdiv при всех нажатиях кнопок (например showdiv('IT_Spend_2012', 'IT_Spend_Nav'); , для первой кнопки)

Метки: