via - Changing the hash but not moving the page using jquery ui tabs




link to specific tab from another page (5)

I added the following code to change the hash to the tab name:

$("#tabs > ul").tabs({ 
select: function(event, ui){ 
window.location.hash = ui.tab.hash; 
} 
} );

This works fine in FF3 but in IE7 it moves down the page (depending on the tab selected anywhere from somewhere near the top of the page all the way down to the very end of the page).

I tried changing it to:

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location = ui.tab.hash;
})

This leads to identical behavior in both IE7 and FF3, which moves the page down to the top of the selected tab.

I would like the tab to be changed, the hash to be updated, but the page not moved at all, which is how it works in FF3 in my first example, but not in IE7.

Thanks.

Notes: JQuery 1.3.1 / JQuery-UI 1.6rc6


If there's an element on the page that has the same id as what you're setting the hash to, for instance you're trying to set the browser hash to #cars and there's already a div#cars on the page, the browser will scroll you down to where that div is.

To my knowledge, there are 3 possible workarounds

1) Change the browser hash to something else such as #thecars.

2) Change your existing markup in some similar manner.

3) On some event, changing the id of your similarly named markup, then changing the browser hash, then rechanging the name of markup back to it's original value should also theoretically work. This is obviously a bad and slow workaround, just thought I'd mention it.


It seems that using the id works as well as the index, e.g. simply doing this will work out of the box...

$("#tabs").tabs("select", "#sample-tab-1");

This is well documented in the official docs:

"Select a tab, as if it were clicked. The second argument is the zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id)."

I assume this was added after this question was asked and probably after most of the answers


You could try having a "return false;" after you set the window location but I can't be sure.

Unfortunately, your problems won't end there. There are other issues with navigating back and forth across multiple browsers--nothing may change, page may reload, page state might be mangled, javascript may get reinitialized etc.

You may want to have a look at Tabs v2 which uses the History/Remote plugin though it has not been updated for jQuery 1.3+.

This demo is easier to understand. If you look at the javascript source, you'll notice the use of iframes to handle states.

There is also the History Event plugin and the jHistory plugin to achieve what you want.

Would like to hear back how things turns out and what solution you went with.


$('#tabs').tabs('select', index); 

Methods `'select' isn't support in jquery ui 1.10.0.http://api.jqueryui.com/tabs/

I use this code , and work correctly:

  $('#tabs').tabs({ active: index });

Switch to selected tab by name in Jquery-UI Tabs

I could not get the previous answer to work. I did the following to get the index of the tab by name:

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);