Question

I want to add a class on my navigation bar when a page is loaded.

Here’s my try:

$(document).ready(function(){

    $('index.php').load(function(){
        $("#etusivu").addClass("selected");
        $("#quartz").removeClass("selected");
        $("#raikastimet").removeClass("selected");
        $("#sisusta").removeClass("selected");
        $("#teipit").removeClass("selected");
        $("#vaimennusmatot").removeClass("selected");
    });

    $('quartz.php').load(function(){

        $("#etusivu").removeClass("selected");
        $("#quartz").addClass("selected");
        $("#raikastimet").removeClass("selected");
        $("#sisusta").removeClass("selected");
        $("#teipit").removeClass("selected");
        $("#vaimennusmatot").removeClass("selected");
    });

    $('raikastimet.php').load(function(){

        $("#etusivu").removeClass("selected");
        $("#quartz").removeClass("selected");
        $("#raikastimet").addClass("selected");
        $("#sisusta").removeClass("selected");
        $("#teipit").removeClass("selected");
        $("#vaimennusmatot").removeClass("selected");
    });

    $('sisusta.php').load(function(){

        $("#etusivu").removeClass("selected");
        $("#quartz").removeClass("selected");
        $("#raikastimet").removeClass("selected");
        $("#sisusta").addClass("selected");
        $("#teipit").removeClass("selected");
        $("#vaimennusmatot").removeClass("selected");
    });

    $('teipit.php').load(function(){

        $("#etusivu").removeClass("selected");
        $("#quartz").removeClass("selected");
        $("#raikastimet").removeClass("selected");
        $("#sisusta").removeClass("selected");
        $("#teipit").addClass("selected");
        $("#vaimennusmatot").removeClass("selected");
    });

    $('vaimennusmatot.php').load(function(){

        $("#etusivu").removeClass("selected");
        $("#quartz").removeClass("selected");
        $("#raikastimet").removeClass("selected");
        $("#sisusta").removeClass("selected");
        $("#teipit").removeClass("selected");
        $("#vaimennusmatot").addClass("selected");
    });

});

So I’m trying to add class="selected" when user clicks a link on navigation, and browser loads a new page. But this isn’t working.

Here’s the navigation:

<ul id="navigation">';
        <li id="etusivu"><a href="index.php">Etusivu</a></li>
        <li id="quartz"><a href="quartz.php">Quartz-kalvot</a></li>
        <li id="raikastimet"><a href="raikastimet.php">Raikastimet</a></li>
        <li id="sisusta"><a href="sisusta.php">Sisusta</a></li>
        <li id="teipit"><a href="teipit.php">Teipit</a></li>
        <li id="vaimennusmatot"><a href="vaimennusmatot.php">Vaimennusmatot</a></li>
</ul>

Answer 1

That’s not the correct usage of load method.

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

$(document).ready(function(){

  $('#navigation a').click(function(event) {
     event.preventDefault(); // prevents the default action of the event
     $(this).parent().addClass('selected').siblings().removeClass('selected');
     var url = this.href;
     $('#whereToLoad').load(url)
  })

});

• load()
• sublings()
• parent()
• event.preventDefault()