个人中心
gpt4 book ai didi

javascript - 从一个菜单导航到另一个菜单时如何保存 css background-color 属性更改的状态

转载 作者：行者123 更新时间：2023-11-28 03:27:19 25 4
gpt4 key购买 nike

例如。我有以下导航菜单。 enter image description here

这是我的 jquery 代码，用于查看导航菜单上的点击事件。

//background colors setup for each nav menu
var colors_array_by_class = {"home" : "#111111", "about-us" : "#47F514", "campaigns" : "#F2720A", "news" : "#0A76F2", "donate" : "#F7A116" };

$("ul.nav").on('click', 'li > a', function(){
            $("ul.nav > li > a").css("background-color", "#0E0E0E");
            $(this).css("background-color", colors_array_by_class[$(this).children("i").attr('class')]);
});

当用户点击“新闻”菜单时，“新闻”菜单的 css 背景颜色将变为蓝色，这是上面代码所期望的。但是当用户导航到新闻页面时，页面刷新，然后新闻菜单的 css 背景颜色恢复为原始颜色。

这不是我想要的正确行为。我希望在用户离开另一个页面时保存更改的背景颜色，因此我试图弄清楚我可以采取哪些可用方法来实现这一目标？我正在考虑向 colors_arrays_by_class 数组添加额外的数组参数，我在其中为每个菜单类提供了自己的默认状态值，并且每次用户浏览页面时它们都会更改。

但我只是不确定这种方法是否正确...

你怎么看？

最佳答案

使用 CSS(首选)

将类或属性添加到标识页面的正文。 HTML5 的 data-* 属性正是为此而生的。如果您使用的是 PHP，它可能看起来像这样:

<body data-page-name="<?= $pageName; ?>">

然后，在您的 CSS 中，您有以下一些 CSS 规则:

body[data-page-name="home"] ul.nav { background-color: #111 }
body[data-page-name="about-us"] ul.nav { background-color: #47F514; }
body[data-page-name="campaigns"] ul.nav { background-color: #F2720A; }
body[data-page-name="news"] ul.nav { background-color: #0A76F2; }
body[data-page-name="donate"] ul.nav { background-color: #F7A116; }

使用 Javascript(有趣)

您想将信息传递到下一页，然后在加载页面时检索该信息。您可以通过三种方式在页面之间传递信息:localStorage 和 cookie。

Cookies

首先，下载this .它是一个 jQuery 插件，可以在您想使用 cookie 时简化您的生活。

这是 setter 的样子:(给新变量赋值)

$.cookie('key','value');

这是 getter 的样子:(检索变量的值)

$.cookie('key');

本地存储

localStorage是 HTML5 中的一项新功能，可以替代 cookie。您有基本的键值对，类似于 Redis。

Setter 看起来像这样:

localStorage.setItem('key','value');

setter/getter 看起来像这样:

localStorage.getItem('key'); // returns "value"

如您所知，您还可以使用 sessionStorage。用法相同，但客户端下次访问时不保留数据

将其捆绑在一起

现在，如果客户端的浏览器支持，sessionStorage/localStorage 将是首选方法。因此，您应该在缓存和信息之前进行检查以了解该怎么做。将它们放在一起，您的代码可能如下所示:

$(function () {

    // Check for background color
    if ( typeof sessionStorage !== "undefined" ) {
        var menuBackgroundColor = sessionStorage.getItem('menuBackgroundColor');
        sessionStorage.removeItem('menuBackgroundColor');
    } else {
        var menuBackgroundColor = $.cookie('menuBackgroundColor');
        $.removeCookie('menuBackgroundColor')
    }

    //background colors setup for each nav menu
    var colors_array_by_class = {
        "home"      : "#111111",
        "about-us"  : "#47F514",
        "campaigns" : "#F2720A",
        "news"      : "#0A76F2",
        "donate"    : "#F7A116"
    };

    // Click event
    $("ul.nav").on('click', 'li > a', function(){

        // Cache new menu color for later use
        var newMenuColor = colors_array_by_class[ $(this).children("i").attr('class') ];

        // Visual change
        $("ul.nav > li > a").css("background-color", "#0E0E0E");
        $(this).css("background-color", newMenuColor );

        if ( typeof sessionStorage !== "undefined" )
            localStorage.setItem('menuBackgroundColor', newMenuColor );
        else
            $.cookie('menuBackgroundColor', newMenuColor );

    });
})();

希望对您有所帮助。

关于javascript - 从一个菜单导航到另一个菜单时如何保存 css background-color 属性更改的状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20391932/

25 4 0
文章推荐： c++ - 从文件输入 CGAL 类
文章推荐： html - 在下拉菜单列表中添加图标
文章推荐： c++ - 如何让 C++ vector 变大？
文章推荐： c++ - 在类外访问类模板变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com