Question

Im trying to add a simple class/id on my <li> element which is in my menu, by using jquery.

However, when I click on a menu-option my class/id is added by jquery successfully but my site of course is gonna update because it redirects to the choicen site.

The result I end up with is that my class/id is removed because of this update..

How can I bypass this so my class/id stays on the selected menu <li> element.

My code looks like this:

 $(document).ready(function()  
 {  
    $('li').click(function()  
    {  
       $(this).addClass('selected');  
    });  
 });

This is the site: http://insatsplutonen.xedge.nu/
Click yourself thru the menu-options. If you click on ex: Blogg the class ‘selected will be added on the <li> element but will disappear because of page-load…

Thing is i want selected menu-option to turn white and others stay gray 🙂

Kind regards /Haris

Answer 1

It seems like you are loading the page based on the query string. When I select “Blogg”, I get http://insatsplutonen.xedge.nu/?Blogg

When you load the page and check your query string and find a menu variable there, set a variable to the menu item value, and use it to set the class for the menu item accordingly. Ex. for Blogg item:

<li <?php echo ($queryStrVal == 'Blogg') ? 'class="selected"' : ''; ?>>