刷新时如何防止jquery ui默认第一个选项卡处于活动状态

Question

我使用jquery ui 作为我网站的导航，在每个选项卡中我放置了一些指向基本上由ajax 动态加载的页面的链接。除了一个问题，一切都很好！

问题

我的问题是，当我单击第一个选项卡以外的其他选项卡并从浏览器中单击刷新时，它会将我带回默认的第一个选项卡。正如我所说，我在这些选项卡中使用了链接，这些链接应该是我网站的导航，但是这个问题不好！例如，如果我单击选项卡two，然后单击其中的任何一个链接，即SubMenu 1.1，它的工作和加载内容正常，但是当我点击浏览器刷新按钮时会发生什么，它会让我回到选项卡one，尽管我我还在标签two SubMenu 1.1 这是代码。

  <div id="tabs">
        <ul>
            <li><a href="#fragment-1"><span>One</span></a></li>
            <li><a href="#fragment-2"><span>Two</span></a></li>
            <li><a href="#fragment-3"><span>Three</span></a></li>
        </ul>
     <div id="fragment-1">
        <ul>
            <li><a href="#SubMenu 1.1">SubMenu 1.1</a></li>
            <li><a href="#SubMenu 1.2">SubMenu 1.2</a></li>
            <li><a href="#SubMenu 1.3">SubMenu 1.3</a></li>
            <li><a href="#SubMenu 1.4">SubMenu 1.4</a></li>
            <li><a href="#SubMenu 1.5">SubMenu 1.5</a></li>
        <ul>
     </div>
     <div id="fragment-2">
        <ul>
            <li><a href="#SubMenu 2.1">SubMenu 2.1</a></li>
            <li><a href="#SubMenu 2.2">SubMenu 2.2</a></li>
            <li><a href="#SubMenu 2.3">SubMenu 2.3</a></li>
            <li><a href="#SubMenu 2.4">SubMenu 2.4</a></li>
            <li><a href="#SubMenu 2.5">SubMenu 2.5</a></li>
       </ul>
     </div>
     <div id="fragment-3">
       <ul>
            <li><a href="#SubMenu 3.1">SubMenu 3.1</a></li>
            <li><a href="#SubMenu 3.2">SubMenu 3.2</a></li>
            <li><a href="#SubMenu 3.3">SubMenu 3.3</a></li>
            <li><a href="#SubMenu 3.4">SubMenu 3.4</a></li>
            <li><a href="#SubMenu 3.5">SubMenu 3.5</a></li>
       </ul>
      </div>
  </div>

也使用了本地存储，但尽管浏览器支持 firefox 39 chrome 43 和 Ie 11，但它无法正常工作

if(window.localStorage!==undefined){
   var selected=0;
   if(localStorage.currentTab){
      selected=Number(localStorage.currentTab)
   }else{
      localStorage.currentTab=0;
   }

   $("#tabs").tabs({ 
      selected: selected,
      select: function(event, ui) {
      localStorage.currentTab=ui.index
   }
   });//Do something
 }else{
      alert('Your browser is outdated therefore not supported local stroage!');
 }

也从jquery ui 的官方网站使用了这个不同的值，但没有按我的意愿工作。

  $( ".selector" ).tabs({
    active: 1
  });

我们将不胜感激。谢谢

Answer 1

使用active 属性而不是selected

还有activate 而不是selected 处理程序。

ui.index 也未定义，因为该属性在 ui 对象上不可用。

改为使用$(ui.newTab[0]).index() - jQuery 对象为您提供当前的li，您可以获得它的索引。

$("#tabs").tabs({ 
   active: selected,
   activate: function(event, ui) {
     localStorage.currentTab = $(ui.newTab[0]).index()
   }
});

始终使用开发人员工具来调试或检查任何错误。这让生活更轻松。

jSFiddle