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/ - 这是一个小提琴！

$(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");
            }
        });

您的代码在记住要抓取的元素时遇到了问题。我认为这是由于网络存储API对对象的不熟悉。相反，我从选中的元素中获取文本，将其存储在localStorage中，并在页面加载时将其与正确的元素匹配。还有一部分代码正在处理查找类＆＃34;活动＆＃34;在所选元素的siblings()内并删除它。代码复杂很大程度上是不必要的。我用类选择器$(".active")

替换它

我在代码中没有对此进行更改，但我建议不要使用localStorage支持sessionStorage，以便存储将在标签/浏览器关闭时自行清除。

有关详细信息，请查看以前的stackoverflow帖子：Storing Objects in HTML5 localStorage

Answer 2

这是一个可能的解决方案：https://jsfiddle.net/6yyLpma1/

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

                    $('#side-bar').find(".active").removeClass("active");
                    $(id).addClass("active");
                    localStorage.setItem("selectedolditem", id);
                });

而不是$(id).siblings()使用$('#side-bar')。在其他位置使用相同的逻辑。

Answer 3

使用数据元素和委托函数：https://jsfiddle.net/ebo7hLo9/12/

HTML

<span id="delegateAnchor">
    <div id="side-bar">
        <ul>
            <li><a href="#" data-desc="home">Home</a></li>
            <li><a href="#" data-desc="whoAreWe">Who we are</a></li>
            <li><a href="#" data-desc="services">Services</a></li>
            <li><a href="#" data-desc="whatToExpect">What to expect</a></li>
            <li><a href="#" data-desc="representClients">Representative clients</a></li>
            <li><a href="#" data-desc="successStories">Success stories</a></li>
            <li><a href="#" data-desc="currentLit">Current litigation</a></li>
            <li><a href="#" data-desc="whatIfYouCould">What if you could not be a doctor?</a></li>
        </ul>
    </div>
</span>

的Javascript

$(document).ready(function () {
    $('#delegateAnchor').on('click', '#side-bar a', function() {
        var $this = $(this);
        var linkId = $this.data('desc');

        $this.closest('ul').find('a').removeClass("active");
        $this.addClass("active");

        localStorage.setItem("menuSelection", linkId);
    });

    var selectedLinkId = localStorage.getItem("menuSelection");

    if (selectedLinkId !== null) {
        $('#side-bar a[data-desc="'+ selectedLinkId +'"]').trigger("click");
    }
});

如何在更改页面时保持活动类

3 个答案: