how to achieve active state in a navigation for a one page website

Question

I am working on a one page website. In this website, I would like to have the active section or \"page\" to be underlined in the navigation bar. Currently I have the link to

Answer 1

you just forgot to add jquery and set the code to run on dom ready: http://jsfiddle.net/GdePr/8/

$(function(){
    $('#navbar a').click(function () {
        $('#navbar a').css('text-decoration', 'none');//don't forget to reset other inactive links
     $(this).css('text-decoration', 'underline');
     });
 });

But what i would suggest is to add the class active to the selected link and give it underline property in your CSS file so you can later in your script recognize current active link:http://jsfiddle.net/GdePr/14/

$(function(){
    $('#navbar a').click(function () {
        $('#navbar a').removeClass('active');
        $(this).addClass('active');
     });
 });

CSS:

 a.active{
       text-decoration: underline !important; 
    }