Выделить текущую страницу в JQuery

Question

У меня 12 HTML-страниц. и все эти страницы загружаются при нажатии левой навигационной панели. в этом я должен добавить класс к текущей ссылке, которая щелкала и загружала страницу. я пробовал с этим:

$(function(){
    $('#container li a').click(function(){
        $('#container li a').removeClass('current');
        var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
        var currentPage = $(this).attr('href');

        if(currentPage==pathname){
            $(this).addClass('current');
        }
        else{
            alert('wrong');
        }

       // alert(pathname+' currentPage: '+currentPage);

    })
})

это работает, но при загрузке страницы класс удаляется, я не знаю, почему это происходит ..

любая помощь?

Answer 1

Джимми прав. Когда вы перезагружаете страницу, браузер также обновляет код Javascript, что означает, что все сделанные вами переменные и настройки также будут сброшены. Вот почему класс, кажется, удаляется, когда вы нажимаете на ссылку.

Решение здесь состоит в том, чтобы изменить ваш код, чтобы проходить по всем ссылкам и сравнивать каждую из них с URL текущей страницы. Когда вы найдете совпадение, вызовите функцию addClass для этой ссылки, чтобы изменить ее цвет. Итак, что-то вроде этого должно работать:

$(function(){

    var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);

    $('#container ul li a').each(function() {
    if ($(this).attr('href') == pathname)
    {
        $(this).addClass('current');
    }
    });
});

Обратите внимание, что мы вызываем эту функцию зацикливания при загрузке страницы, а не вызываем ее, когда пользователь щелкает ссылку ... потому что нажатие на ссылку приведет к перезагрузке страницы, что приведет к сбросу всех переменных JQuery.

Надеюсь, это поможет.

Answer 2

С jQuery я всегда думаю, что лучше использовать селектор jQuery для фильтрации элементов, на которые вы хотите повлиять, а не проходить через них самостоятельно.Вот мое решение:

$(document).ready( function () {
    var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
    $("#container li a").removeClass("current");
    $("#container li a[href='" + pathname  + "']").addClass("current");
});

Answer 3

JavaScript - это клиентский язык в браузере, поэтому любые изменения, вносимые вами на страницу, сохраняются только до тех пор, пока окно не будет закрыто или не будет загружена новая страница.То, что вы пытаетесь сделать, действительно должно быть сделано на стороне сервера.Если вы настаиваете на использовании JavaScript или если серверный язык почему-то вам недоступен, вам нужно будет выделить навигационную ссылку текущей страницы при загрузке страницы, а не в ответ на нажатие одной из ссылок.