Can I make this into a javascript function?
<pre><code>$("#tab1").click(function(){
     loadTab(1);
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
     $(this).addClass('selected');
    });
</code></pre>

<p>Would it be possible to make the code above into a function where I could just call it like  </p>

<pre><code>tab(TAB NUMBER HERE);
</code></pre>

<p>and have it add/remove the correct styles/divs?</p>

<p>The whole code for the script is below</p>

<pre><code>&lt;script type="text/javascript"&gt;
// array of pages to load
var pageUrl = new Array();    
pageUrl[1] = "page1.php";
pageUrl[2] = "somepage2.php";
pageUrl[3] = "lastpage3.php";

// function to load page into DIV
function loadTab(id) {
    if (pageUrl[id].length &gt; 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.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
     $(this).addClass('selected');
    });

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

    $("#tab3").click(function(){
     loadTab(3);
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
     $(this).addClass('selected');
    });
    });

    alert(window.location.hash);
&lt;/script&gt;
</code></pre>
