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

Question

我在我的应用程序中使用Bootstrap pills：

<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秒钟内变为活动状态，然后跳转到实际的活动选项卡。我能否保持当前选项卡而不出现这种“跳跃”现象？

- Nadiya

---

要么隐藏选项卡，直到您决定显示哪一个，要么编写内联脚本以获取“active”类。另一种方法是在加载任何其他脚本之前设置“active”类，这样您就不必等待一秒钟，它将很快完成。 - skobaljic

我认为在当前状态下，你不能通过JavaScript在不同的状态下呈现你的药丸并切换它。你应该将活动药丸状态存储在服务器端，或者在切换到正确的药丸/选项卡之前隐藏所有内容并显示某种加载器（UX）。 - lukaszkups

Answer 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>

- gaetanoM

---

我的错误，我刚刚注意到我的代码中所有的<a></a>标签中都使用了href而不是data-target（请参见我问题的编辑，非常抱歉）。所以我进行了更改并使用了您修复后的代码，但问题仍然存在：第一个选项卡会在1秒钟内变为活动状态，然后才是所需的选项卡。 - Nadiya

@Zelenka 你可以添加一个隐藏类，然后像我的代码片段一样重新组织你的js。让我知道。 - gaetanoM

我在下面添加了一个答案。感谢您的时间！ - Nadiya

Answer 2

答案就像ABC一样简单。

我只需要从第一个

标签中删除class="active"即可：

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

- Nadiya

---

当用户第一次访问时，不会打开任何选项卡。 - Shahbaz A.

Answer 3

简单的回答：只需从默认选项卡及其内容中删除 ACTIVE CLASS 即可。

<div class="container">
  <ul class="nav nav-pills">
    <li><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" id="home">Home</div>
  <div class="tab-pane" id="about">About</div>
  <div class="tab-pane" id="contacts">Contacts</div>
</div>

在 Javascript 文件中的 script 标签内：

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

- Sakshant Bhaisade