some issue with nested tab while trying to implement jquery ui tab with back/forward/refresh button support

I'm having problems with the browser history (using the "Back" and "Forward" buttons) with jQuery's tab plugin. I combined jQuery UI tab and jQuery BBQ: Back Button & Query Library plugin together for this.

I think the problem may deal with nested tabs.

You can find full code at http://jsfiddle.net/nQgC8/

If you test this, you'll see that tabs at top works fine: you can navigate to any of the tabs and successfully go back and forward at any point. This is not the case for nested tab. Nested tab can be found inside tab 3.

What do I need to do to make this work for nested tabs?

The following are snippets to show my point:

<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"开发者_JS百科>...</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>

This works for me in chrome. What browser are you trying it with?