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


i'm having problems browser history (using "back" , "forward" buttons) jquery's tab plugin. combined jquery ui tab , jquery bbq: button & query library plugin this.

i think problem may deal nested tabs.

you can find full code @ http://jsfiddle.net/nqgc8/

if test this, you'll see tabs @ top works fine: can navigate of tabs , go , forward @ point. not case nested tab. nested tab can found inside tab 3.

what need make work nested tabs?

the following snippets show 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">...</div>       <div id="tabs-33">...</div>     </div>   </div> </div>  <script>   $(function() {     $( '#tabs' ).tabs();     // adding hash url 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 url 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 me in chrome. browser trying with?


Comments

Popular posts from this blog

android - Spacing between the stars of a rating bar? -

aspxgridview - Devexpress grid - header filter does not work if column is initially hidden -

c# - How to execute a particular part of code asynchronously in a class -