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
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]
Post a Comment for "Using Jquery Hash To Alter Url Without Bookmarking"