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

xam8gpfp 于 2023-05-27 发布在 Bootstrap

关注(0)|答案(3)|浏览(122)

我在我的应用程序中使用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秒，然后它跳转到实际的活动选项卡。我可以保持当前选项卡没有这个'跳转'？

twitter-bootstrap

来源：https://stackoverflow.com/questions/39331715/keep-current-bootstrap-tab-active-after-page-reload-without-jumping-to-first-one

3条答案

按热度按时间

vohkndzv1#

这一行：

$('[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>

赞(0）回复(0）举报 2023-05-27

5rgfhyps2#

答案就像ABC一样简单。
我只需要从第一个<li></li>标签中删除class=“active”：

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

赞(0）回复(0）举报 2023-05-27

c86crjj03#

答案很简单：只需从默认选项卡及其内容中删除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'));
    });
});

赞(0）回复(0）举报 2023-05-27

我来回答

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

3条答案

相关问题

热门标签

最新问答