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。它们都允许您拥有单页网站，只刷新您网页的一部分。

如果你愿意，你可以通过Ajax调用刷新页面中的内容。

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

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

2 个答案: