Is there a better way to do jquery Tabs?

Question

Below is the jquery code I am using for my AJAX tabs

Is there a better way that would be faster in the browser, I don't care about fancy transitions.

<script type="text/javascript">
var pageUrl = new Array();    
pageUrl[1] = "HOMEbulletin.inc.php";
pageUrl[2] = "HOMEfriendstatus.inc.php";
pageUrl[3] = "HOMEbulletin.inc.php";

function loadTab(id){
    if (pageUrl[id].length > 0){
     $("#loading").show();
     $.ajax({url: pageUrl[id], cache: false, success: function(message) {                
      $("#tabcontent").empty().append(message);
      $("#loading").hide();             
     }
    });           
}
}

$(document).ready(function(){
    $("#loading").hide();
    $("#tab1").click(function(){
     loadTab(1);
     $('div.tabs2 ul.HOMEtabs a').removeClass('selected');
     $(this).addClass('selected');
    });

    $("#tab2").click(function(){
     loadTab(2);
     $('div.tabs2 ul.HOMEtabs a').removeClass('selected');
     $(this).addClass('selected');
    });

    $("#tab3").click(function(){
     loadTab(3);
     $('div.tabs2 ul.HOMEtabs a').removeClass('selected');
     $(this).addClass('selected');
    });
    });
</script>

Answer 1

While it appears you solved it yourself, I'll offer an alternative as well.

You could have also added a call to the new click function of the tab you wanted to call at the end of your document.ready():

$("#tab1").click();

Answer 2

Have you checked out JQueryUI's Tabs? They're pretty excellent. No need to reinvent the wheel. It also adds support for some neat features like using a cookie to save whatever tab the user was on last.

If you're worried about filesize, you can grab only the components you need, alternatively:

You can use Google's hosted copies of both JQuery and JQueryUI, it uses their entire network, and is extremely fast.

3 Reasons to let Google host for you - Encosia.com