javascript - Keep CSS styles after navigating to another page -
i have jquery code navbar controls dropdown , other styling. testing purposes, i've made first line:
$( ".dropdown--link").on("click", function(event) { event.preventdefault(); }) but stops link functioning. there way maintain jquery styling, , link new page while maintaining added style? example, styling after event.preventdefault(); removed after navigate new page , want remain (in case preventdefault removed).
( ".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); })
you can save "status" of style local storage , every time load page change style if changed previously.
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(); } }); when you'll want undo change run code:
localstorage.setitem("stylechanged", "0");
Comments
Post a Comment