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

NITPICK. Using `$(this)` over and over again is bad practice. Store it into a variable and use that variable. — epascarello, Apr 02 '13 at 12:24
If you refresh the page in NewTransaction() function your applied CSS will be set to default try something without refreshing the page — Dineshkani, Apr 02 '13 at 12:27
What does Home() and NewTransaction() actually do? Navigate to a different page? Also are you using an server side technology with this? — Chris Moutray, Apr 02 '13 at 12:41

score 1 · Accepted Answer · edited May 23 '17 at 11:57

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

@Agent1 can you be more specific - which function? `$(document).ready(function () { ... });` is fundamental to jQuery and so not sure if I can help without more detail if you can't get this basic feature to work... — Chris Moutray, Apr 03 '13 at 05:52
@Agent1 is your menu static, in that there will always be X number of menu items to select from? Or can it change depending on the page you've selected? — Chris Moutray, Apr 03 '13 at 07:56

Spokey · Answer 2 · 2013-04-02T13:13:58.037

NOTE: The answer Chris provided works really well, but you have to actually have the link in the href of <a></a>, otherwise it will be undefined.

You could add an id to a with the link and then use

var menuLink = $('#'+currentUrl);

the code provided by Chris

(this way the page won't redirect because you clicked the link but will run the function instead)

<div class="menuBar">
    <div class="menuHeader ui-corner-top menuHeaderActive">
        <span><a href="#" id="http://www.yourwebsite.url//home/welcome" onclick="Home()">Home</a></span>
    </div>
    <div class="menuHeader ui-corner-top">
        <span><a href="#" id="http://www.yourwebsite.url/EnergyCatagory/index" onclick="NewTransaction()">New Transaction</a></span>
    </div>
</div>

And the JS

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

On a side note, if that's a different page you only have to add menuHeaderActive to the active a and remove it from the other on that specific page

In the first method you mentioned about the id. Can you explain it more — Nithin Viswanathan, Apr 03 '13 at 04:51

How to apply CSS for the menu while selecting?

2 Answers2