Can I make a URL load a tab for me in jquery?

Question

Below is the complete code of the jquery AJAX tab script I am working on.

I need some help. This script has 3 tabs, each load a page using AJAX into a DIV.
I need to be able to have 1 of the 3 pages "selected" and loaded on page load.

If the url was www.site.com/page.php it should load the first tab's contents and have that tab selected.

Then if I went to something like www.site.com/page.php?t=bulletins or any method but somehow in the URL I can specifify for a differnt tab to be loaded and selected on page load.

Example on the same page I could add something in the URL and when that page was called from a link on another page went to this page it would have tab 2 loaded instead of tab 1.

Can anyone help me add this to this script? I do not want to use jqueryUI if possible.

So is this possible without jquery UI?

Would also appreciate any improvements to my current code, I am new at javascript and jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
// 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 > 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');
    });
    });
</script>

<div class="HOMEtabdiv">
    <ul class="HOMEtabs">
     <li><a id="tab1" href="#" onClick="return false;" class="selected">All</a></li>
     <li><a id="tab2" href="#" onClick="return false;">Status</a></li>
     <li><a id="tab3" href="#" onClick="return false;">Bulletins</a></li>
    </ul> 
</div>
<div id="loading"> 
    <img src="images/loading.gif">
</div> 
<div id="tabcontent"> 
Tab Content loads pages into here
</div>

<style type="text/css">
a:active { outline:none;}
:focus {  -moz-outline-style:none;}
/* root element for tabs  */
ul.HOMEtabs {  
    margin:0 !important; 
    padding:0;
    height:30px;
    border-bottom:1px solid #666;   
}
/* single tab */
ul.HOMEtabs li {  
    float:left;  
    padding:0; 
    margin:0;  
    list-style-type:none; 
}
ul.HOMEtabs a { 
    float:left;
    font-size:13px;
    display:block;
    padding:5px 30px; 
    text-decoration:none;
    border:1px solid #666; 
    border-bottom:0px;
    height:18px;
    background-color:#efefef;
    color:#777;
    margin-right:2px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright:4px;
    position:relative;
    top:1px; 
}
ul.HOMEtabs a:hover {
    background-color:#FFFFFF;
    color:#333;
}
/* selected tab */
ul.HOMEtabs a.selected {
    background-color:#FFFFFF;
    border-bottom:2px solid #FFFFFF; 
    color:#000; 
    cursor:default;
}
</style>

Answer 1

I would load the contents of the divs immediately upon page load, assuming their contents aren't real heavy. As for auto-selecting the first tab, that should be done via CSS, so it's immediately visible upon page-load. If you wish to do it programmatically, I'd suggest something as simple as:

$("div.tabs:first").trigger("click");

Which would raise the click event for that tab, and therefore show it's content.

To detect which tab should be selected upon page load, you should use the hash-attribute of the url.

alert(window.location.hash);

That would alert "projects" if you were to visit www.somesite.com/index.html#projects. The great thing about using the hash-reference is how it behaves naturally, by scrolling the key-content into view when CSS isn't available.

From that value (if it's present), determine which tab to trigger the click on when the page loads. This should be enough to get you rolling in the right direction. If you have more specific questions, feel free to ask them and we'll be glad to assist you as much as possible.