javascript - 如何在换页时保持活跃类(class)

Question

我正在尝试将事件类添加到导航项，具体取决于您所在的页面。我正在使用这个脚本:

<script type="text/javascript">
    $(document).ready(function () {
        $("#side-bar a").click(function () {
            var id = $(this);

            $(id).siblings().find(".active").removeClass("active");
            $(id).addClass("active");
            localStorage.setItem("selectedolditem", id);
        });

        var selectedolditem = localStorage.getItem('selectedolditem');

        if (selectedolditem !== null) {
            $(selectedolditem).siblings().find(".active").removeClass("active");
            $(selectedolditem).addClass("active");
        }
    });
</script>

在这里查看完整的jsfiddle:https://jsfiddle.net/ebo7hLo9/ 它添加了事件类，但加载了一个新页面，它就消失了。我做错了什么？

Answer 1

https://jsfiddle.net/ebo7hLo9/10/ - 这是一个 fiddle !

$(document).ready(function () {

            $("#side-bar a").click(function () {
                var id = $(this);

                $(".active").removeClass("active");
                $(id).addClass("active");
                localStorage.setItem("selectedolditem", $(id).text());

            });

            var selectedolditem = localStorage.getItem('selectedolditem');

            if (selectedolditem !== null) {

                $("a:contains('" + selectedolditem + "')").addClass("active");
            }
        });

您的代码在记住要抓取的元素时遇到问题。我认为这是由于 Web 存储 API 对对象不熟悉造成的。相反，我从所选元素中获取文本，将其存储在 localStorage 中，并在页面加载时将其与正确的元素进行匹配。此外，您的代码的一部分负责在所选元素的 siblings() 中查找“active”类并将其删除。这么复杂的代码基本上是不必要的。我用类选择器 $(".active")

替换它

我没有在代码中更改这一点，但我建议不要使用 localStorage 而是使用 sessionStorage ，以便存储在选项卡/浏览器上自行清除关闭。

有关更多信息，请查看之前的 stackoverflow 帖子:Storing Objects in HTML5 localStorage