current page menu 's background color doesn't change

Question

Here's the jsfiddle: http://jsfiddle.net/fht7zsm2/

I used below code to change background color for current page

.sf-menu .active{
             background-color:#1B3E70;
             color:white;

        }

I placed below script in footer.I also tried placing in header but doesn't work:

<script>
$('.sf-menu a').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        });
</script>

I refered to this : Change link color of the current page with CSS

AND http://jsfiddle.net/7VBy9/

Answer 1

In your case both <a> are not siblings as it is inside different <li> which are siblings

$('.sf-menu a').click(function(){
        $(this).addClass('active').closest('li').siblings('li').find('a').removeClass('active');
});

Updated fiddle

Answer 2

Just remove the tags in de JavaScript part of JSFiddle. They're not needed.

http://jsfiddle.net/fht7zsm2/

$('.sf-menu a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});

Answer 3

other <a> are not the sibling of <a>

or you can also use this

$('.sf-menu a').click(function () {
    $('.sf-menu a').removeClass('active');
    $(this).addClass('active')
});

demo - http://jsfiddle.net/fht7zsm2/2/