2

Есть код навигационного бара со списком с ссылками ведущими на id блока, и блоки с содержимым страниц. Как реализовать чтобы при нажатии на ссылку, элементу списка присваивался класс .active, а у блока с id на который ведет ссылка удалялся класс .hidden при этом всем остальным блокам с классом .page этот класс присваивался.

<div class="navbar">
    <ul class="nav">
        <li class="active"><a href="#home">Link</a></li>
        <li><a href="#page1">Link</a></li>
        <li><a href="#page2">Action</a></li>
        <li><a href="#page3">Another action</a></li>
        <li><a href="#page4">Something else here</a></li>
    </ul>
</div>
<div id="home" class="page">
    страница с содержимым home
</div>
<div id="page1" class="page hidden">
    страница с содержимым page1
</div>
<div id="page2" class="page hidden">
    страница с содержимым page2
</div>
<div id="page3" class="page hidden">
    страница с содержимым page3
</div>
<div id="page4" class="page hidden">
    страница с содержимым page4
</div>

1 ответ 1

3

По клику на ссылку у всех <li> в .nav убирается класс .active, а у её родителю он добавляется.
Затем берётся href ссылки и используется в качестве селектора для поиска соответствующего блока.
Всем блокам-страницам добавляется класс hidden, после чего у выбранного блока этот класс убирается.

$(document).ready(function() {
    var $pages = $('.page');
    var $links = $('.nav li');
    $('.nav a').on("click", function() {
        $links.removeClass("active");
        $(this).parent().addClass("active");
        var href = $(this).attr('href');
        $pages.addClass("hidden");
        $(href).removeClass("hidden");
    });
});
.active {
    background-color: gray;
}
.hidden {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
    <ul class="nav">
        <li class="active"><a href="#home">Link</a></li>
        <li><a href="#page1">Link</a></li>
        <li><a href="#page2">Action</a></li>
        <li><a href="#page3">Another action</a></li>
        <li><a href="#page4">Something else here</a></li>
    </ul>
</div>
<div id="home" class="page">
    страница с содержимым home
</div>
<div id="page1" class="page hidden">
    страница с содержимым page1
</div>
<div id="page2" class="page hidden">
    страница с содержимым page2
</div>
<div id="page3" class="page hidden">
    страница с содержимым page3
</div>
<div id="page4" class="page hidden">
    страница с содержимым page4
</div>

7
  • у тебя постепенно все li будут активными :-)
    – Grundy
    13 июл 2016 в 12:28
  • @Grundy ага. И это неспроста: в описании автора нет ни слова про удаление класса active с других <li>. Поэтому я сделал всё равно так, как написано :)
    – Regent
    13 июл 2016 в 12:39
  • У него зато есть: скрывать неактивные, а сейчас получается - li активны, а див скрыт :)
    – Grundy
    13 июл 2016 в 12:40
  • Да совсем забыл сказать чтобы класс .active удалялся у li. Но в принципе то не проблема, сам допишу. А это как раз то что нужно, спасибо большое)
    – seledkapod
    13 июл 2016 в 12:48
  • @seledkapod на здоровье. Я доработал ответ. Если он вас устраивает, не забудьте отметить его как правильный.
    – Regent
    13 июл 2016 в 12:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.