Bootstrap 4导航标签页问题：如何从登录页内链接打开忘记密码标签？

这个问题我之前也碰到过——Bootstrap 4对tab组件的触发逻辑做了调整，导致Bootstrap 3里直接用data-toggle="tab"的内部链接失效了。下面给你两种可靠的解决方案：

方案1：使用Bootstrap原生JS API触发Tab切换 #

这是最符合Bootstrap 4组件规范的写法，能确保tab和对应的内容面板都正确激活：

修正后的HTML代码 #

<ul class="nav nav-tabs" role="tablist"> 
  <li class="nav-item">
    <a class="nav-link active" href="#log-in" data-toggle="tab" id="login-tab">Log in</a>
  </li> 
  <li class="nav-item">
    <a class="nav-link" href="#forgot-password" data-toggle="tab" id="forgot-password-tab">Forgot password</a>
  </li> 
  <li class="nav-item">
    <a class="nav-link" href="#sign-up" data-toggle="tab" id="signup-tab">Sign up</a>
  </li> 
</ul> 
<div class="tab-content"> 
  <div class="tab-pane fade show active" id="log-in"> 
    Login tab 
    <!-- 给跳转链接加个ID方便JS选择 -->
    <a href="#forgot-password" id="go-to-forgot">Go to Forget Password</a> 
  </div> 
  <div class="tab-pane fade" id="forgot-password">Forgot password tab</div> 
  <div class="tab-pane fade" id="sign-up">sign-up tab</div> 
</div>

对应的JavaScript代码 #

// 确保DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取跳转链接元素
  const goToForgotLink = document.getElementById('go-to-forgot');
  
  goToForgotLink.addEventListener('click', function(e) {
    // 阻止默认的锚点跳转行为，避免页面滚动
    e.preventDefault();
    
    // 获取目标tab的导航元素
    const targetTab = document.getElementById('forgot-password-tab');
    
    // 使用Bootstrap的Tab组件激活目标tab
    const tabInstance = new bootstrap.Tab(targetTab);
    tabInstance.show();
  });
});

方案2：jQuery写法（如果你的项目依赖jQuery） #

如果项目里已经引入了jQuery，也可以用更简洁的方式实现：

$(document).ready(function() {
  $('#go-to-forgot').click(function(e) {
    e.preventDefault();
    $('#forgot-password-tab').tab('show');
  });
});

为什么原来的Bootstrap 3写法失效？ #

Bootstrap 3中，data-toggle="tab"的链接不管放在哪里，都会自动触发tab切换逻辑；但Bootstrap 4重构了组件的事件绑定机制，内部tab面板里的data-toggle="tab"链接无法正确触发父级tab组件的切换事件，必须手动调用Tab.show()方法来完成完整的tab激活流程（包括切换导航栏的active类、内容面板的active/show类，以及触发相关事件）。

内容的提问来源于stack exchange，提问作者Note