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

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

2 голосов
/ 19 января 2012

Я читал все об этом в Интернете, но все остальное было слишком сложным, и я просто хочу реализовать простой код, который я могу читать, не вдаваясь в подстроки и все такое, поэтому я подумал, что это может быть хорошим испытанием для как нуб в 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');
        }
    })
})

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

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

Ответы [ 3 ]

3 голосов
/ 19 января 2012

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

2 голосов
/ 19 января 2012

В вашем 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: Хорошо, давайте попробуем новый подход, который использует функцию filter() jQuery, чтобы использовать атрибут 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
    }
});

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

0 голосов
/ 24 января 2012

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

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 в том, что я использую встроенную контактную форму на своей странице контактов. И я почти уверен, что второй, если он не нужен, но не хотел его удалять, как только у меня все заработало.

...