некоторая проблема с вложенной вкладкой при попытке реализовать вкладку jquery ui с поддержкой кнопок назад / вперед / обновления

У меня проблемы с историей браузера (с помощью кнопок «Назад» и «Вперед») с плагином вкладок 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>

person Aman    schedule 16.11.2010    source источник


Ответы (1)


У меня это работает в хроме. В каком браузере вы это пытаетесь?

person randomThought    schedule 16.11.2010
comment
нажмите tab2, затем tab3, а затем нажмите sub-tab tab3-2, теперь нажмите кнопку назад, это должно переместить нас обратно на tab3-1, верно? но это не перемещает нас на вкладку3-1, она остается на вкладке3-2 - person Aman; 16.11.2010
comment
нет. Это не так, как должно работать. Он вернет вас обратно к tab3-1, только если вы нажмете на tab3-1, а затем на tab3-2. Если вы не посещали tab3-1, кнопка «Назад» не приведет вас к tab3-1. - person randomThought; 16.11.2010
comment
поэтому, когда вы нажимаете tab2, затем tab3, затем tab3-2, когда вы нажимаете назад, он переходит на tab3, поскольку он был последним посещенным. - person randomThought; 16.11.2010