Сохраните стили CSS после перехода на другую страницу

Question

У меня есть код jQuery для моего навигатора, который управляет выпадающим списком и другим стилем. В целях тестирования я сделал первую строку:

$(".dropdown--link").on("click", function(event) { 
    event.preventDefault(); 
}) 

, но это не позволяет моей ссылке работать. Есть ли способ поддерживать стиль jQuery и ссылку на новую страницу при сохранении добавленного стиля? Например, после стирания послеevent.preventDefault(); удаляется после перехода на новую страницу, и я хочу, чтобы она осталась (в случае удаления preventDefault).

(".dropdown--link").on("click", function(event) { 
     // event.preventDefault(); 

     var targetPosition = $(this).offset().left; 
     var targetWidth = $(this).width(); 
     var targetCenter = targetPosition + (0.5 * targetWidth) - 10; 

     $("nav ul li").each(function() { $(this).removeClass("bold"); }); 
     $(this).addClass('bold'); 
     $(".arrow-down").show(); 
     $(".arrow-down").css("left", targetCenter); 
}) 

Answer 1

Вы можете сохранить «статус» стиля в локальном хранилище и каждый раз, когда вы загружаете страницу, измените стиль, если он был изменен ранее.

function changeStyle() { 
     // event.preventDefault(); 
     localStorage.setItem("styleChanged", "1"); 

     var targetPosition = $(this).offset().left; 
     var targetWidth = $(this).width(); 
     var targetCenter = targetPosition + (0.5 * targetWidth) - 10; 

     $("nav ul li").each(function() { $(this).removeClass("bold"); }); 
     $(this).addClass('bold'); 
     $(".arrow-down").show(); 
     $(".arrow-down").css("left", targetCenter); 
} 

$(".dropdown--link").on("click", changeStyle); 

$.ready(function(){ 
    var styleChanged = localStorage.getItem("styleChanged"); 
    if (styleChanged && styleChanged.equals("1")) { 
     changeStyle(); 
    } 
}); 

Когда вы хотите отменить изменения запустить этот код:

localStorage.setItem("styleChanged", "0"); 

Answer 2

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

Взгляните. AngularJS, KnockoutJs, EmberJS. или даже MVC от Microsoft. все они позволяют вам иметь сайты с одной страницей, которые обновляют только часть вашей страницы.

Ад вы можете просто обновить контент на своей странице с помощью вызова Ajax, если хотите.

Сохранение состояния на другой странице будет работать только с параметрами url или с переменными сеанса.