JSFiddle - React, Tailwind, and code Playground

by dhavalbharadva

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
<div id="menu">
    <ul>
        <li><a href="#" id="home" class="currentlink">Home</a>

        </li>
        <li><a href="#" id="2">Link2</a>

        </li>
        <li><a href="#" id="3">Link3</a>

        </li>
    </ul>
</div>

CSS

#menu a:link, #menu a:visited {
    color: blue;
}
#menu a:focus, #menu a:hover, #menu a:active {
    color: blue;
    background: pink;
}
#menu a.currentlink {
    color: pink;
    background: blue;
}

JavaScript

$(document).ready(function () {
    var setId = $.cookie("currentId");
    if (typeof setId !== "undefined") {
        $("#menu a").removeClass("currentlink");
        $('#' + setId).addClass("currentlink"); // currentlink set using cookie
    }
    var $targetElement = $("#menu a");
    $targetElement.click(function () {
        $targetElement.removeClass("currentlink");
        $(this).addClass("currentlink");
        var lastID = $(this).attr("id");
        $.cookie('currentId', lastID);
    });
});