I have got a task to highlight the selected menu while refreshing the page. For that I want to use cookie. Html code is

<div class="menuBar">
            <div class="menuHeader ui-corner-top">
             <span><a href="#" onclick="Home()" id="home">Home</a></span>
            </div>
            <div class="menuHeader ui-corner-top">
             <span><a href="#" onclick="NewTransaction()" id="newtransaction">New Transaction</a></span>
            </div>
</div>

Javascript file is

function Home() {
            window.location.href = "../../home/wele";
        }
        function NewTransaction() {
            window.location.href = "../../EnergyCatagory/index";
        }

But I have a code to set the menu as selected.But its not a good way.How can I pass the value of the selected menu to the page while refreshing? this is the code for highlighting the menu

 $(document).ready(function () {
                var currentUrl = window.location.href;
                if (currentUrl.indexOf("home/wele") !== -1) {
                    $("#home").parent().parent().addClass('menuHeaderActive');
                }
                else if (currentUrl.indexOf("EnergyCatagory/index") !== -1) {
                    $("#newtransaction").parent().parent().addClass('menuHeaderActive');
                }
                else if (currentUrl.indexOf("portfolio/Index") !== -1) {
                    $("#portfolio").parent().parent().addClass('menuHeaderActive');
                }
            });

I have got a task to highlight the selected menu while refreshing the page. For that I want to use cookie. Html code is

<div class="menuBar">
            <div class="menuHeader ui-corner-top">
             <span><a href="#" onclick="Home()" id="home">Home</a></span>
            </div>
            <div class="menuHeader ui-corner-top">
             <span><a href="#" onclick="NewTransaction()" id="newtransaction">New Transaction</a></span>
            </div>
</div>

Javascript file is

function Home() {
            window.location.href = "../../home/wele";
        }
        function NewTransaction() {
            window.location.href = "../../EnergyCatagory/index";
        }

But I have a code to set the menu as selected.But its not a good way.How can I pass the value of the selected menu to the page while refreshing? this is the code for highlighting the menu

 $(document).ready(function () {
                var currentUrl = window.location.href;
                if (currentUrl.indexOf("home/wele") !== -1) {
                    $("#home").parent().parent().addClass('menuHeaderActive');
                }
                else if (currentUrl.indexOf("EnergyCatagory/index") !== -1) {
                    $("#newtransaction").parent().parent().addClass('menuHeaderActive');
                }
                else if (currentUrl.indexOf("portfolio/Index") !== -1) {
                    $("#portfolio").parent().parent().addClass('menuHeaderActive');
                }
            });

• javascript
• jquery
• html
• cookies

• @MatthewAgustin, can any code be "non semantic"? For me the answer is no. A mountain is non semantic, as is a laundry basket. – Beetroot-Beetroot Commented Apr 3, 2013 at 8:40

3 Answers 3

Give id for every menu item.

Then in the onclick() function of menu item set that id as cookie.

Set cookie

$.cookie("selectedId", $(this).attr('id'));

In document.ready function add selected class to the element with id obtained from cookie

You can implement it like this:

function goToLocation(sLocation, id) {
   $.cookie("activediv", id);
   window.location.href = sLocation;
}

in html:

<a href="#" onclick="goToLocation('../../home/wele', 'home')" id="home">Home</a>

in jQuery ready:

$('#' + $.cookie("activediv")).parent().parent().addClass('menuHeaderActive');

Try to set cookises using jQuery as:

$.cookie("name", "value");

More you can read here:How do I set/unset cookie with jQuery?