Question

I have this jQuery code that retrieves external content using ajax, without refereshing the page, and I also have a navigation links that has the different background color when user is on the current page.

The jQuery code:

function loadPage(url)  //the function that loads pages via AJAX
{
    url=url.replace('#page','');    //strip the #page part of the hash and leave only the page number

    //$('#loading').css('visibility','visible');    //show the rotating gif animation
        $('.counter').html('<img src="img/ajax_load.gif" width="16" height="16" style="padding:12px" alt="loading" />');

    $.ajax({    //create an ajax request to load_page.php
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,  //with the page number as a parameter
        dataType: "",   //expect html to be returned
        success: function(msg){

            if(parseInt(msg)!=0)    //if no errors
            {
                $('#change-container').html(msg);   //load the returned html into pageContet


            }
        }

    });
}

the html navigation code:

<ul>
   <li class="current"><a href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
   <li><a href="#page4">Favorites</a></li>
</ul>

So basically when someone clicks on the replies link, I want the li class to change to current, to indicate that you are at that page.

Answer 1

Example: http://jsfiddle.net/4cs9h/

$('ul > li > a').click(function() {
    var $th = $(this).parent();
    if( !$th.hasClass('current') ) {
        $th.addClass('current')
               .siblings('.current').removeClass('current');
        loadPage(this.href);
    }
    return false;
});

The $th variable refers to the parent <li> of the <a> that was clicked.

If the <li> does not have the current class, the class will be added and will be removed from any siblings that have that class, and loadPage() will be called, sending the href attribute of the clicked <a>.

---

With regard to your comment, yes it would be a good idea to target the specific <ul> with an ID.

$('#navigation > li > a').click(function() {...

HTML

<ul id="navigation">
   <li class="current"><a href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
   ...

---

To use a hash value included in the page, you can pass it to the loadPage() function.

var hash = window.location.hash;

    if( !hash || hash === '#' )
        hash = "#page1";

loadPage( hash );