CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Garrettj944
Garrettj944

Reputation: 325

How to keep active class when changing pages

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?

Upvotes: 2

Views: 2513

Answers (3)

Taplar
Taplar

Reputation: 24965

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

Upvotes: 0

zfrisch
zfrisch

Reputation: 8670

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

Upvotes: 2

Vim
Vim

Reputation: 559

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.

Upvotes: 0

Related Questions