Question

How can this be made to reload the last page viewed (after reload) when the url is mypage.php#tab3 or default to loading the first tab? Note the attempt to add id’s to li links and catch the hash.

The code below has the desired effect, except for the ‘active’ class. Meaning: the div is visible under the wrong tab. Thanks for suggesting.

<script type="text/javascript">
$(document).ready(function(){
    $(".tabContents").hide();                                       // Hide all tab content divs by default
    if (window.location.hash)
        $(".tabContents").filter(window.location.hash).show();      // Show the div with hash in url
    else
        $(".tabContents:first").show()                              // Show the first div of tab content by default

    $("#tabContainer ul li a").click(function(){                    // Fire the click event         
        var activeTab = $(this).attr("href");                       // Catch the click link
        $("#tabContainer ul li a").removeClass("active");       // Remove pre-highlighted link
        $(this).addClass("active");                             // Set clicked link to highlight state
        $(".tabContents").hide();                                   // Hide currently visible tab content div
        $(activeTab).fadeIn();                                      // Show the target tab content div by matching clicked link.
    });
});
</script>
....
<div id="tabContainer">
    <ul>
        <li><a class="active" href="#tab1" id="tab1">Purchase</a></li>
        <li><a href="#tab2" id="tab2">Sales</a></li>
        <li><a href="#tab3" id="tab3">Transactions</a></li>
    </ul>

    <div id="tab1" class="tabContents">
        <h1>Purchase</h1>
        ... content ...
    </div>
    <div id="tab2" class="tabContents">
        <h1>Sales</h1>
        ... content ...
    </div>
    <div id="tab3" class="tabContents">
        <h1>Transactions</h1>
        ... content ...
    </div>
</div>

Answer 1

Found one alternative to the jQuery ready(function(). Added a body onload="load_tab();" & removed if/else statements to make this work. Still looking for a fix to work within the ready(function()

function load_tab() {
    if (window.location.hash) {
        var t = window.location.hash.substr(4)-1;
        var i = window.location.hash;
    }
    else {
        var t = '0';
        var i = '#tab1';
    }

    $(".tabContents").hide();                        // Hide all tab content divs by default
    $('#tabContainer ul li a:eq('+t+')').addClass("active");    // Set highlight state
    $(i).show();
}