Question

我在使用jQuery的标签插件时遇到浏览器历史记录（使用“后退”和“前进”按钮）的问题。我结合了jQuery UI选项卡和jQuery BBQ：Back Button＆amp;查询库插件一起为此。

我认为问题可能涉及嵌套标签。

找到完整的代码

如果您对此进行测试，您会看到顶部的标签正常工作：您可以导航到任何标签，并可以随时成功前进和后退。嵌套选项卡不是这种情况。嵌套选项卡可以在选项卡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>

Answer 1

这适用于我的chrome。您正在尝试使用哪种浏览器？

尝试使用后退/前进/刷新按钮支持实现jquery ui选项卡时嵌套选项卡的一些问题

1 个答案: