CODEWITHSUNDEEP
jquerytabs
David
David

Reputation: 3323

jQuery Tabs and Page Reload - Show last used tab

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>

Upvotes: 0

Views: 2352

Answers (2)

David
David

Reputation: 3323

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();
}

Upvotes: 0

avladov
avladov

Reputation: 851

If I'm understanding you right you need deep linking for your page.
Easiest way to achieve this is by using jQuery Address. You can get it from HERE

Check this example - http://www.asual.com/jquery/address/samples/api/

It's well documented, but here is a simple example.

$.address.change(function(event) {
    var pathNames = event.pathNames;
    // <<< Your code here.  >>>
    //PathNames is the array with all path elements from the anchor.
});



EDIT : Without jQuery Address

Asuming your are using jQuery you can listen for onhashchange

$(window).hashchange(function(){
    alert(location.hash);
});

This will catch any anchor change, but there will be a problem with browsers default behavior. All links with non-existing anchor will just jump to the top of the page. you don't want this, so in order to fix this for every link you want to use place click listener and return false to tackle the default behavior.
Don't forget to manually change the anchor, too.

$('a.deep-linking').click(function(){
    window.location.hash = a.attr('hash');
    return false;
});


Can this be achieved with simple JavaScript?
The short answer is yes, but you'll have to write some more code. The main problem you will have is with onhashchange since it's not supported in IE6/IE7.
jQuery solves this on problematic browsers by using a timeout to check the hash on fixed small intervals.

Upvotes: 1

Related Questions