How to apply CSS for the menu while selecting?

Question

I have a task to highlight the menu as selected while loading the page. For that I have the following code:

$('.menuHeader').each(function () {
    $(this).attr('id', 'menu' + ($(this).index() + 1));
    $(this).val($(this).index() + 1);

    // Set the dynamic ids for links
    $(this).find('a').attr('id', 'link' + ($(this).index() + 1));
    //alert('New ID  :  ' + $(this).find('a').attr('id'));
});

$('.menuHeader a').click(function () {
    alert("a");
    $('.menuHeader a').removeClass('menuHeaderActive');
    $(this).parent().parent(".menuHeader").addClass('menuHeaderActive');
});

But when I select the second menu, it's refreshed and missing the selection.

HTML:

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

How can I solve this problem?

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

Answer 1

I think you could amend your hyperlinks to include the correct url. Then in you jQuery test the browsers current url against the hyperlinks url - if it's a match apply your menuHeaderActive class.

$(document).ready(function () {
    var currentUrl = window.location.href;
    var menuLink = $('.menuHeader a[href="' + currentUrl + '"]');
    menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive');
});

When the page reloads after one of the menu links have been clicked the script I've shown should run and $('.menuHeader a[href="' + currentUrl + '"]'); should find the menu link (hyperlink/a-tag) that matches the url the user navigated too. Then it's a case of finding the container div and adding your class.

Basically you don't add the css class when the user clicks the menu link; you have to set the css class after the page has redirected to the other page. So it's the other page that has to set the css class against the correct active menu link. There are 100's of ways to do this but based on what you've provided matching urls is the simplest.

Personally I'd have each page register a page id that corresponds to one of the menu links. Something like this...

HTML

Note the attribute data-associated-page-id added to each menuHeader div

<div class="menuBar">
    <div class="menuHeader ui-corner-top" data-associated-page-id="home-welcome">
        <span><a href="#" onclick="Home()">Home</a></span>
    </div>
    <div class="menuHeader ui-corner-top" data-associated-page-id="energy-catagory-index">
        <span><a href="#" onclick="NewTransaction()">New Transaction</a></span>
    </div>
</div>

Javascript

Added to each page

document ready handler for welcome page aka ../../home/welcome

$(document).ready(function () {
    SetActiveMenuCssClass('home-welcome');
});

document ready handler for energy catagory index page aka ../../EnergyCatagory/index

$(document).ready(function () {
    SetActiveMenuCssClass('energy-catagory-index');
});

function defined globally

function SetActiveMenuCssClass(pageId) {
    // finds div with menuHeader class that has the attribute data-associated-page-id equal to the page id
    // then sets the active class
    $('.menuHeader[data-associated-page-id="' + pageId + '"]')
        .addClass('menuHeaderActive');
}

If you were using a server side language like PHP then you could do something like this https://stackoverflow.com/a/11814284/81053