tabs reload ajax

Question

I want to add to this simple file ... When you click on a tab updated contents of the page or reload

---

$(function(){ 

    $('#tabsSlide #nav li a').click(function(){ 

        var currentNum = $(this).attr('id').slice(-1); 
        $('#tabsSlide #nav li a').removeClass('current'); 
        $(this).addClass('current'); 

        $('#tabsSlide #content .tab-slide').slideUp(300); 
        $('#tabsSlide #content #slide-'+currentNum+'.tab-slide').slideDown(300); 
    }); 

}); 

Answer 1

You'll probably want to look at the load function: it takes a URL, loads it via AJAX, and replaces the contents of the element. Something like this:

$(function(){ 

    $('#tabsSlide #nav li a').click(function(){ 

        var currentNum = $(this).attr('id').slice(-1); 
        $('#tabsSlide #nav li a').removeClass('current'); 
        $(this).addClass('current');

        $('#tabsSlide #content .tab-slide').slideUp(300); 
        $('#tabsSlide #content #slide-'+currentNum+'.tab-slide').slideDown(300)

        $('#contents-of-tab').load(url); // will replace the matched element with the data loaded from url, asynchronously
    }); 

});

(you'll want to change the selector, of course)