Добавить и удалить активный класс из навигационной ссылки

Question

Я искал учебники о том, как добавить и удалить класс из ссылки, к сожалению, безуспешно. Все предыдущие вопросы дают мне некоторое понимание, но не дают мне результата, которого я хочу достичь.

Я пытаюсь создать активное состояние для своей навигации, добавляя и удаляя класс при нажатии на ссылку.

Вот что у меня есть, насколько JavaScript:

$(document).ready(function(){

    //active state  
    $(function() {
        $('li a').click(function(e) {
            e.preventDefault();
            var $this = $(this);
            $this.closest('li').children('a').removeClass('active');
            $this.parent().addClass('active');

        });
    });
});

А это моя навигация:

<div id="nav">
    <div id="main-nav" class="center">
        <ul>
            <li><a href="/photography.php">Photography</a></li>
            <li><a href="/web.php">Web</a></li>
            <li><a href="/print.php">Print</a></li>

            <li class="nav-R"><a href="/about.php">About</a></li>
            <li class="nav-R"><a href="/contact.php">Contact</a></li>
        </ul>
    </div><!-- close center -->
</div><!-- close-nav -->

Answer 1

Вы удаляете «активный» класс из ближайшего дочернего элемента li, а затем добавляете активный класс к текущему a родительскому li. В духе сохранения активного класса на якорях, а не на элементах списка, это будет работать для вас:

    $('li a').click(function(e) {
        e.preventDefault();
        $('a').removeClass('active');
        $(this).addClass('active');
    });

Активная ссылка является активной ссылкой. Никогда не было бы более одной активной ссылки в любой момент времени, поэтому нет никаких оснований быть полностью конкретными относительно удаления класса active. Просто удалите все якоря.

Демо: http://jsfiddle.net/rq9UB/

Answer 2

Попробуйте:

$(function() {
    $('li a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.closest('ul').find('.active').removeClass('active');
        $this.parent().addClass('active');

    });
});

Ваш селектор просматривал родительский элемент текущего ($(this)) a элемента, а затем просматривал среди дочерних элементов этого элемента a.Единственный a в этом элементе - это элемент, который вы только что щелкнули.

Вместо этого мое решение перемещается вверх до ближайшего ul, затем находит element that currently has the class of active` и затем удаляет этот класс.

Кроме того, ваш подход в том виде, в котором он был опубликован, заключался в добавлении active имени класса к элементу li, и вы пытались удалить имя класса из элемента a.Мой подход использует li, но его можно изменить, чтобы использовать a, просто удалив parent() из последней строки.

Ссылки:

• children().
• closest().
• find().

Answer 3

Попробуйте это:

$(function() {
    $('.start').addClass('active');
        $('#main-nav a').click(function() {
        $('#main-nav a').removeClass('active');
        $(this).addClass('active');             
   });
});

Просто добавьте класс .start к элементу nav, для которого вы хотите, чтобы класс .active был первым.

Затем объявите класс .active в вашем cssкак:

#main-nav a.active {

/* YOUR STYLING */

}

Answer 4

Я думаю, что вы хотите:

$this.parents("ul").find("a").removeClass('active');