Выделить текущую страницу в 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

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

Answer 3

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

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