Script not working for On Click and Selected navigation states

Question

Trying to have my navigation have an on click and selected state, but I am not able to do so with this code (website is: http://bit.ly/rgwsite )

$('nav li a').click(function() {
$(this).parent().addClass('on').siblings().removeClass('on');
});

nav li is as follows

<nav>
  <li class="highlt">
    <a href="index.php" class="home"><span>Home</span></a>
</li>

The reason we need to use a jquery/javascript action to add the class to the navigation is because it doesn't refresh when a new page loads. For instance, when you're on the home page and click on the tab "Experience RGW", it only loads the content for that page below the header (within the "#ajax" div). Currently, none of these scripts are working. There is no reason they shouldn't... could there be something else causing the page not to recognize the jquery script and run it on-click? The main reason I ask is because I've tried to test the function and add an alert, but even that didn't work

Thanks in advance!

Answer 1

siblings has your current element selected, you don't want to remove his 'on' class.

$('nav li a').click(function() {
  $(this).parent().siblings().removeClass('on');
  $(this).parent().addClass('on');
});

edit: nvm, your code works fine : look at this jsfiddle .

re-edit: I'm totally wrong, siblings does not contain the current element.

re-re-edit: If you link to another page ( href="index.php" ), the page will be reloaded (or a new one will be loaded) and your JavaScript click action will be forgotten, could it be the error?

Answer 2

You might wanna try it like this:

$(this).parent().siblings().removeClass('on');
$(this).parent().addClass('on');

What you did is add the class "on" to the LI and then removed it with .siblings().removeClass('on');