У меня проблемы с историей браузера (с помощью кнопок «Назад» и «Вперед») с плагином вкладок jQuery. Для этого я объединил вкладку jQuery UI и плагин jQuery BBQ: Back Button и Query Library.
Думаю, проблема может быть во вложенных вкладках.
Полный код можно найти на странице http://jsfiddle.net/nQgC8/
Если вы протестируете это, вы увидите, что вкладки вверху работают нормально: вы можете перейти к любой из вкладок и успешно вернуться назад и вперед в любой момент. Это не относится к вложенной вкладке. Вложенная вкладка находится внутри вкладки 3.
Что мне нужно сделать, чтобы это работало для вложенных вкладок?
Следующие отрывки демонстрируют мою точку зрения:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">...</div>
<div id="tabs-2">...</div>
<div id="tabs-3">
<div id="tabs2">
<ul>
<li><a href="#tabs-31">Tab 3-1</a></li>
<li><a href="#tabs-32">Tab 3-2</a></li>
<li><a href="#tabs-33">Tab 3-3</a></li>
</ul>
<div id="tabs-31">...</div>
<div id="tabs-32">...</div>
<div id="tabs-33">...</div>
</div>
</div>
</div>
<script>
$(function() {
$( '#tabs' ).tabs();
// Adding hash to url for tab tracking
$('#tabs').bind('tabsselect', function (event, ui) {
window.location.href = window.location.protocol + '//' + window.location.hostname + window.location.pathname + ui.tab.hash;
});
$( '#tabs2' ).tabs();
// Adding hash to url for tab tracking
$('#tabs2').bind('tabsselect', function (event, ui) {
window.location.href = window.location.protocol + '//' + window.location.hostname + window.location.pathname + ui.tab.hash;
});
// Handle back/forward/refresh buttons
$(window).hashchange(function () {
var hash = location.hash;
switch (hash) {
case '#tabs-1':
case '#tabs-2':
case '#tabs-3':
$('#tabs').tabs('select', hash);
break;
case '#tabs-31':
case '#tabs-32':
case '#tabs-33':
$('#tabs').tabs('select', '#tabs-3');
$('#tabs2').tabs('select', hash);
break;
default:
$('#tabs').tabs('select', '#tabs-1');
location.hash = '#tabs-1';
}
});
$(window).hashchange();
});
</script>