Question

I have setup some tabs using jquery tools and the history plugin.

When i go to http://jimeagle.com/new/index.php#music.php the music page is correctly loaded but the home tab at the top is still highlighted, how can i update the css of the tab when the tabs script changes the page?

I am also looking for some sort of callback when the ajax page has finished loading, so i can display a loading gif when you click a tab and hide it when the page has loaded.

Thanks.

Answer 1

The .load() method has the possibility to use a callback function. See the Manual.

$loader = $('.ajax-loading');
$('.tab').click(function() {
    $(this).append($loader); //Make spinner appear on click.
    $('#main-content').load('pages.php', function(data) { //Will fire on success
        $('#main-content').append(data);
        $loader.remove();
    });
});