使用CSS（首选）

Question

例如。我有以下导航菜单。 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数组中添加额外的数组参数，我在每个菜单类中都有自己的默认状态值，每次用户在页面中导航时都会更改它们。

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

您怎么看？

Answer 1

在这种情况下，习惯上有一个“选择标签”类，它给定标签一个特定的样式（比如，蓝色背景）。

您只需添加此类并将其附加到“新闻”页面的“新闻”标签

即可

Answer 2

使用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和cookies。

缓存

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

这是setter的外观:(为新变量赋值）

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

这是getter的外观:(检索变量的值）

$.cookie('key');

localStorage的

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

Setters看起来像这样：

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

吸气剂看起来像这样：

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 );

    });
})();

我希望这会有所帮助。

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

2 个答案:

使用CSS（首选）

使用Javascript（有趣）

缓存

localStorage的

将它们绑在一起