Using Jquery Hash To Alter Url Without Bookmarking

Looking to allow user to nav through multiple Tabs on a page, but when hitting the back button, return to their previous page (not have to navigate back through their Tab history).

Solution 1:

If you are using jQuery ui to create the tabs, you can use the following to initiate the tabs:

$( "#tabs" ).tabs({
    activate: function(event, ui) {                   
        window.location.replace('#' + $(ui.newPanel).attr('id'));                     
    }
});

This will add the newly clicked # into the browser urkl without adding it to the history

Example

Solution 2:

With help from @Pete, I was able to come up with a sufficient answer using my current set up (ie not switching to jQuery UI).

This first aspect of the js takes care of the initial issue of creating history when a tab is clicked (thanks to Pete's suggestion of using '.replace' versus '.hash =')

$('.nav-tabs a').click(function (e) {
    var myTab = $(this).tab();
    window.location.replace($(myTab).attr('href'));

    //go to top of page instead of hashtag locationwindow.scrollTo(0, 0);
});

Then, in case the user enters the page with a URL already containing the hashtag in it, open the respective tab.

// if window.location.hash = true, than open the tab where tab x.href == hashif(window.location.hash) {
    var hash = window.location.hash;
    $('ul.nav a[href="' + hash + '"]').tab('show');

    //go to top of page instead of hashtag locationwindow.onload = function(){
        window.scrollTo(0, 0);
    }   
}

[using bootstrap 2 tab js]