更改页面时如何保持活动班级

Question

I am trying to add an active class to nav item, depending what page your on. I am using this script:

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

See full jsfiddle here: https://jsfiddle.net/ebo7hLo9/ It adds the active class, but it loads a new page, it disappears. What am I doing wrong?

Answer 1

https://jsfiddle.net/ebo7hLo9/10/ - here's a 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");
            }
        });

Your code was having issues remembering what element to grab. I think it's due to the web storage API's unfamiliarity with objects. Instead I got the text from the element that was selected, stored it in localStorage and on page load matched it with the correct element. Also there was part of your code that was dealing with finding the class "active" within the siblings() of the selected element and removing it. That complex of code is largely unnecessary. I replaced it with the class selector $(".active")

I didn't change this in the code, but I'd advise against using localStorage in favor of sessionStorage so that the storage will clear itself on tab/browser close.

For more info take a look at this previous stackoverflow post: Storing Objects in HTML5 localStorage

Answer 2

Here is a possible solution: 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);
                });

Instead of $(id).siblings() use $('#side-bar') . Use the same logic in other location.

Answer 3

Using data elements and a delegate function: 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");
    }
});