Change class name of anchor tab inside list

Question

I have a small query.

<ul class="navigation">
        <li><a href="#home">Home<span class="ui_icon home"></span></a></li>
        <li><a href="#aboutus">About Us<span class="ui_icon aboutus"></span></a></li>
        <li><a href="#services">Services<span class="ui_icon services"></span></a></li>
        <li><a href="#gallery">Gallery<span class="ui_icon gallery"></span></a></li>
        <li><a href="#contactus">Contact Us<span class="ui_icon contactus"></span></a></li>
    </ul>

this code I got from internet, it's like on click only the page scrolls to the next content. and the selected list item updates itself. But when I try to implement this template in my Asp.net masterpage, the list items does not get updated. so what can I do? Any suggestion?

below is the CSS default provided by the template

ul.navigation a:hover, ul.navigation a.selected {
    color: #201f1b;
    background: url(../images/templatemo_menu_hover.png) no-repeat left;
}

Answer 1

If you want to set the class selected to the clicked anchor and remove it from other anchor, then use:

$('.navigation li a').click(function(e) {
    e.preventDefault();
    $('.navigation li a').removeClass('selected');
    $(this).addClass('selected');
})

Fiddle Demo

Answer 2

If you want to use the 'on click' function to remove and add the class on elements, try the code below:

$(".navigation li a").on("click", function (event) {
    //prevents the browser from going to a new URL
        event.preventDefault();
    //removes selected class from all elements
        $('.navigation li a').removeClass('selected');
    //adds selected class to element you click
        $(this).addClass('selected');
});

I do not have access to your image so I used the background-color parameter in the css

jsfiddle example: http://jsfiddle.net/9Jjud/