导航到另一个页面后保留 CSS 样式

Question

我有一些 jQuery 用于控制下拉菜单和其他样式的导航栏代码。出于测试目的，我做了第一行：

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

但这使我的 link 无法正常工作。有没有办法在保持添加样式的同时保持 jQuery 样式和新页面的 link ？例如，所有样式 after 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

您可以将样式 "status" 保存到本地存储，并且每次加载页面时更改样式（如果以前更改过）。

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。甚至来自 Microsoft 的 MVC。它们都允许您拥有仅刷新页面一部分的单页网站。

见鬼，如果需要，您可以使用 Ajax 调用来刷新页面中的内容。

在另一个页面上保持状态只适用于 url 参数或会话变量。

导航到另一个页面后保留 CSS 样式

Keep CSS styles after navigating to another page

html

javascript

css

jquery

preventdefault