Подсветка текущего элемента страницы в навигационном меню с помощью jQuery

Question

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

HTML

<ul id="nav">
    <li><a href="/" id="home" class="lettering">HOME</a></li>
    <li><a href="/about" id="about" class="lettering">ABOUT</a></li>
    <li><a href="/works" id="works" class="lettering">WORKS</a></li>
    <li><a href="/contact" id="contact" class="lettering">CONTACT</a></li>
</ul>

JQuery

$(document).ready ( function(){
    var path = window.location.pathname;
    $('#nav li a').each(function() {
        if( path = ("/"+this.id+"/") ){
            this.addClass('active');
        } else {
            ('#home').addClass('active');
        }
    })
})

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

редактировать: убрал косую черту (спасибо Джастину), также попробовал то, что предложил Фрогз, но не повезло. Если кто-то решает проблему, сайт находится по адресу @ egegorgulu.com.

Answer 1

Если кто-нибудь бродит, я придумал для этого следующую функцию. Большое спасибо GregL за его указатели, это мне очень помогло.

jQuery.noConflict()( function(){
    var $ = jQuery;
    var path = window.location.pathname;
    $('#nav li a').each(function() {
        if( path === "/" + this.id + "/" ){ 
            $(this).addClass('active'); 
        } else if( path === "/" ) {
            $('#home').addClass('active'); 
        }
    }); 
});

Причина noConflict заключается в том, что я использую встроенную контактную форму на своей странице контактов. И я почти уверен, что второй, если он не нужен, но не хотел его удалять, как только у меня все заработало.

Answer 2

В вашем js к контуру добавлена ​​конечная косая черта, но в конце ваших тегов нет косой черты. Поэтому, если ваш сервер не добавит косую черту, эти пути никогда не будут совпадать.

Answer 3

В вашем Javascript есть несколько ошибок, которые я могу заметить.

Прежде всего потому, что вам нужно знать, что в .each(), this ссылается на объект элемента DOM, поэтому для вызова любых методов jQuery необходимо передать this к функции jQuery: $(this),

Поэтому попробуйте следующее:

$(document).ready ( function(){
    var path = window.location.pathname;
    $('#nav li a').each(function() {
        if( path === "/"+this.id ){ // EDIT: This was the problem with the if
            $(this).addClass('active'); // "this" is a DOM element, not a jQuery object
        } else {
            $('#home').addClass('active'); // you missed the $
        }
    }); // always get in the habit of being explicit with your semicolons
});

РЕДАКТИРОВАТЬ: проблема с вашим if было то, что вы использовали оператор присваивания = вместо оператора сравнения == (равенство с преобразованием типов) / === (равенство с одними и теми же типами). Я отредактировал код выше, чтобы решить эту проблему.

РЕДАКТИРОВАТЬ 2: Хорошо, давайте попробуем новый подход, который использует JQuery filter() функция, чтобы использовать href атрибут на <a> элементы для поиска соответствия:

$(document).ready ( function(){
    var path = window.location.pathname;
    var $navLinks = $('#nav li a');
    $navLinks.removeClass('active'); // start with a blank slate
    $navLinks.filter(function() {
        return path.indexOf(this.href) === 0; // test if the pathname starts with the current link's href attribute
    }).addClass('active'); // find a matching link to add the class to where the href attribute starts with the pathname
    if ($navLinks.filter('.active').length === 0) { // if nothing matches
        $('#home').addClass('active'); // make the home link active as a default
    }
});

В качестве академического замечания, обратите внимание, что вы можете использовать мощный синтаксис цепочки jQuery и некоторые знания JS, чтобы сжать это еще больше, если хотите, чтобы он мог стать таким маленьким, как:

$(document).ready ( function(){
    if (!$('#nav li a').removeClass('active').filter(function() {
            return window.location.pathname.indexOf(this.href) === 0;
        }).addClass('active').end().filter('.active').length) {
        $('#home').addClass('active'); // make the home link active as a default
    }
});

Как это для короткого, но трудного для понимания фрагмента кода (который также не протестирован, кстати)?