在页面刷新后保持切换类

时间:2011-12-05 10:14:21

标签: jquery cookies toggleclass

我认为这已经做了很多次,但是尽管读了一些关于cookie的帖子却无法理解它。

我基本上有一个第二个body类,为整个站点提供不同的字体,当客户端点击链接更改字体时,可以访问该字体。理想情况下,这不会是逐页的,但新类将在访问新页面后“坚持”。我通过jquery更改类代码如下所示:

$(document).ready(function() {
    $("a#switcher").click(function() {
        $("body").toggleClass("alternate_body");
    });
});

有没有相对简单的方法来实现这一目标?提前谢谢。

4 个答案:

答案 0 :(得分:3)

Cookie方法

您可以使用jQuery插件(例如jquery-cookie)来简化Cookie访问。所以你的代码会变成这样的东西来保存类设置:

$(document).ready(function() {
    var body_class = $.cookie('body_class');
    if(body_class) {
        $('body').attr('class', body_class);
    }
    $("a#switcher").click(function() {
        $("body").toggleClass("alternate_body");
        $.cookie('body_class', $('body').attr('class'));
    });
});

网址参数

另一种选择是在页面点击#switcher以保持状态而不设置cookie时,在页面的所有链接上设置URL参数。

答案 1 :(得分:1)

使用Cookie或HTML5中引入的全新local storage。您还可以创建一些服务器会话解决方案,通过AJAX调用获得先前的设置。

答案 2 :(得分:0)

你肯定需要使用cookies。

首先,您需要下载jQuery cookie plugin并将其添加到您的页面。

然后在上面的示例中,您需要在更改主体类时设置cookie:

$("a#switcher").click(function() {
    $("body").toggleClass("alternate_body");
    $.cookie('bodyClass', 'alternate_body');
});

然后在页面加载时,检查cookie并根据需要设置body类:

$("BODY").addClass($.cookie('bodyClass'));

答案 3 :(得分:0)

你可以使用cookies在页面刷新后保存它。 只需将类保存在cookie中并在需要时读取(刷新后)。 如果您不知道cookie如何工作,请按照以下示例进行操作:

http://www.electrictoolbox.com/jquery-cookies/

第二个选项是调用php函数将其保存到数据库中(我不知道这是用户登录时的情况吗?)但是你可以将它保存在数据库中以保存并读取它后来所以当有人删除他的网络历史记录,或者去另一台计算机时,他有相同的布局。

映入眼帘, 斯特凡。