防止在选项卡更改引导程序4上显示第一个活动选项卡答案

【问题标题】：Prevent show first active tab on tab change bootstrap 4防止在选项卡更改引导程序4上显示第一个活动选项卡
【发布时间】：2018-12-29 10:48:53
【问题描述】：

我有代码：

if (location.hash) {
  $('a[href=\'' + location.hash + '\']').tab('show');
}
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
  $('a[href="' + activeTab + '"]').tab('show');
}

$('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
  e.preventDefault()
  var tab_name = this.getAttribute('href');
  if (history.pushState) {
    history.pushState(null, null, tab_name)
  }
  else {
    location.hash = tab_name
  }
  localStorage.setItem('activeTab', tab_name)

  $(this).tab('show');
  return false;
});
$(window).on('popstate', function () {
  var anchor = location.hash ||
    $('a[data-toggle=\'tab\']').first().attr('href');
  $('a[href=\'' + anchor + '\']').tab('show');
});

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    
    

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    


<ul class="nav" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">This is home tab</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">This is profile tab</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">This is contact tab</div>
</div>

当页面与其他选项卡一起重新加载时，如何防止显示第一个活动选项卡？我的标签保存在本地存储中，当我用其他标签重新加载页面时，他首先显示我的第一个标签，然后在我的标签之间显示。我怎样才能防止这个错误？

【问题讨论】：

我测试了这段代码，它似乎表现得很好。您能否详细说明/改述您面临的问题？
@Jeto 抱歉，我没有使用 nav-tabs 类，我使用自定义类，请删除该类并立即检查。
所以可以肯定的是，您的问题是它会先显示第一个选项卡，然后再显示正确的选项卡，对吗？
@Jeto，是的，当然

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

从标签（链接和标签本身）中删除active（但保留show）类。

另外，将您的“默认”（页面加载）脚本更改为：

if (location.hash) {
    $('a[href="' + location.hash + '"]').tab('show');
} else {
    activeTab = localStorage.getItem('activeTab');
    if (activeTab) {
        $('a[href="' + activeTab + '"]').tab('show');
    } else {
        $('#home').addClass('active');
    }
}

由于某种原因，使用$('a[href="#home"]').tab('show'); 无法在页面加载时工作（它不会显示其内容），这一定是一个错误。 $('#home').addClass('active'); 会将 active 类添加回您的默认选项卡（仅当 URL 中没有选项卡哈希并且 localStorage 中也没有任何内容时）。

【讨论】：