页面刷新后所选选项卡不活动[重复]答案

【问题标题】：The selected tab is not active after page refresh [duplicate]页面刷新后所选选项卡不活动[重复]
【发布时间】：2016-08-09 01:02:37
【问题描述】：

我正在尝试在页面刷新后使用最后选择的选项卡。我的代码在下面。通过此代码，页面重新加载后，第一个选项卡始终处于活动状态。

javascript

<script>
      $(function() {
      $( "#tabs" ).tabs();
      });

    </script>

html:

<body>
    <div id='childarpt' class='childarpt' ></br>
    <div id="tabs"><ul>
    <li class="active"><a href="#Total"><span>Total</span></a></li>
    <li><a href="#USA"><span>USA</span></a></li>
    <li><a href="#ASIA"><span>ASIA</span></a></li>
    <li><a href="#JAPAN"><span>JAPAN</span></a></li>
    <li><a href="#LATAM"><span>LATAM</span></a></li>
    <li><a href="#EMEA"><span>EMEA</span></a></li>
    </ul>
    <table id='myTable' border='0'>

     <div id="Total" class="tab active">
     Total
     </div>
     <div id="USA" class="tab">
     USA
    </div>
    <div id="ASIA" class="tab">
    ASIA
    </div>
    <div id="JAPAN" class="tab">
    JAPAN
     </div>
      <div id="LATAM" class="tab">
      LATAM
     </div>
     <div id="EMEA" class="tab">
     EMEA
    </div>

     </table>
     </div>
     </body>

【问题讨论】：

您可以将选项卡 ID 存储在 cookie 或其他东西中，以便以后检索。在这里查看：stackoverflow.com/questions/4299435/…

标签： javascript jquery

【解决方案1】：

代替

$(function() { $( "#tabs" ).tabs(); });

试试这个：

$( "#tabs" ).tabs({ active: 5 });

这将使第六个（它是零索引）选项卡成为默认的活动选项卡。

供您参考：http://api.jqueryui.com/tabs/

【讨论】：

Op 不知道什么是活动标签。而且他还想保持它持久防止重新加载
@LelioFaieta 我为标签提供了静态编号。如果我们想要最后选择的选项卡，我们需要在每次重新加载时动态设置选项卡编号。
不是真的！每个作为其唯一的 id。而且你没有解决保持重新加载信息的问题

【解决方案2】：

请参阅Bootstrap 3: Keep selected tab on page refresh，它包含实现所需的所有信息。

这个想法是将选定的选项卡存储在窗口的哈希值中。选择另一个选项卡时更改位置的哈希值。

【讨论】：

【解决方案3】：

快速解决您的问题

$(function() {
  var tabs = $( "#tabs" )
  tabs.tabs({
    activate: function(e,ui) {
      var index = ui.newTab.index()
      location.hash = index;
    },
    active: location.hash.replace(/#/,"") || 0
  });
});

您需要更改状态的存储和加载，但这会让您失望。

【讨论】：