页面重新加载后保持当前引导选项卡处于活动状态，而不跳转到第一个答案

【问题标题】：Keep current Bootstrap tab active after page reload without jumping to first one between页面重新加载后保持当前引导选项卡处于活动状态，而不跳转到第一个
【发布时间】：2016-09-05 13:29:21
【问题描述】：

我在我的应用中使用 Bootstrap 药丸：

<div class="container">
  <ul class="nav nav-pills">
    <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
    <li><a href="#contacts" data-toggle="tab">Contacts</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home</div>
  <div class="tab-pane" id="about">About</div>
  <div class="tab-pane" id="contacts">Contacts</div>
</div>

为了在页面重新加载后保持在同一个选项卡上，我使用了以下功能：

$(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    localStorage.setItem('lastTab', $(this).attr('href'));
  });
  var lastTab = localStorage.getItem('lastTab');
  if (lastTab) {
    $('[href="' + lastTab + '"]').tab('show');
  }
});

问题是页面重新加载后，第一个选项卡变为活动状态 1 秒钟，然后跳转到实际活动选项卡。我可以在没有这种“跳跃”的情况下保留当前标签吗？

【问题讨论】：

要么隐藏标签直到你决定显示哪一个，要么为active类编写内联脚本。另一种方法是在加载任何其他脚本之前设置 active 类，这样您就不会等待一秒钟，它会很快完成。
我认为在当前状态下 - 你不能 - 你以不同的状态渲染你的药丸，然后通过 javascript 切换它 - 你应该在服务器端存储活动药丸状态或隐藏某种下面的所有内容加载程序（UX）在切换到正确的药丸/标签之前

标签： jquery twitter-bootstrap nav-pills

【解决方案1】：

这一行：

$('[href="' + lastTab + '"]').tab('show');

必须更改：

$('[data-target="' + lastTab + '"]').tab('show');

你不能引用 href 而是 data-target。

同样适用于：localStorage.setItem.....

固定代码（jsfiddle）：

$(function() {
  var lastTab = localStorage.getItem('lastTab');
  $('.container, .tab-content').removeClass('hidden');
  if (lastTab) {
    $('[data-target="' + lastTab + '"]').tab('show');
  }
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    localStorage.setItem('lastTab', $(this).data('target'));
  });
});

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container hidden">
    <ul class="nav nav-pills">
        <li><a data-target="#home" data-toggle="tab">Home</a></li>
        <li><a data-target="#about" data-toggle="tab">About</a></li>
        <li><a data-target="#contacts" data-toggle="tab">Contacts</a></li>
    </ul>
</div>

<div class="tab-content hidden">
    <div class="tab-pane" id="home">Home</div>
    <div class="tab-pane" id="about">About</div>
    <div class="tab-pane" id="contacts">Contacts</div>
</div>

【讨论】：

我的错误，我只是注意到我的代码在所有<a></a> 标签中都有href 而不是data-target（请参阅我的问题的编辑，非常抱歉）。所以我改变了它们并使用了你的固定代码，但问题仍然是一样的：第一个选项卡激活 1 秒，然后才需要的选项卡
@Zelenka 你可以添加隐藏类，像在我的 sn-p 中那样重新组织你的 js。告诉我。
我在下面添加了这个问题的答案。感谢您的宝贵时间！

【解决方案2】：

答案就像ABC一样简单。

我只需要从第一个 <li></li> 标签中删除 class="active"：

<li><a data-target="#home" data-toggle="tab">Home</a></li>

【讨论】：

有了这个，当用户第一次来时，不会打开任何标签。