javascript - 如何防止刷新时 jquery ui 默认第一个选项卡处于事件状态

Question

我使用jquery ui作为我的网站的导航，在每个选项卡中我放置了一些基本上由ajax动态加载的页面的链接。除了一个问题之外，一切正常!

problem

我的问题是，当我单击第一个选项卡之外的其他选项卡并从浏览器中点击刷新时，它会将我带回到默认的第一个选项卡。正如我所说，我在这些选项卡内使用了链接，这些链接应该是我网站的导航，但对于这个问题，这不好!例如，如果我单击选项卡 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