用于转到并打开特定选项卡的外部哈希 (#) 链接不适用于 Bootstrap 5（在 4 上正常）？

Question

我的目标是使用外部哈希 (#) url 链接来打开特定的 Bootstrap 选项卡。我喜欢与 html 锚点链接相同的功能，允许在任何页面中使用链接，通过电子邮件发送任何内容以转到正确的网页，滚动查看，在这种情况下，打开相关选项卡。

这是 CodePen 上可用的 Bootstrap 4 示例 —> https://codepen.io/Chacapamac/pen/RwQZvBX

HTML

<div class="big-spacer"> <a href="#forgot-password" class="tab-link">Go to Forget Password</a> 
<br /><br />
Other test link here
</div>
<div class="big-spacer"> <a href="#forgot-password" class="tab-link">Go to Forget Password</a> </div>
—————————————————————————————————————————————
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="log-in-tab" data-bs-toggle="tab" href="#log-in" role="tab" aria-controls="log-in" aria-selected="true">Log in</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="forgot-password-tab" data-bs-toggle="tab" href="#forgot-password" role="tab" aria-controls="forgot-password" aria-selected="false">Forgot password</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="sign-up-tab" data-bs-toggle="tab" href="#sign-up" role="tab" aria-controls="sign-up" aria-selected="false">Sign up</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="log-in" role="tabpanel" aria-labelledby="log-in-tab">
        Login tab<br />
    </div>
    
    <div class="tab-pane fade" id="forgot-password" role="tabpanel" aria-labelledby="forgot-password-tab">
        Forgt password tab
    </div>

    <div class="tab-pane fade" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">
        Sign-up tab
    </div>
</div>
<br /><br /><br /><br />
I also try to replace href in the nav by data-bs-target

CSS

html { 
  padding: 20px !Important;
  margin: 20px !Important;
}

div.big-spacer { height: 800px;

}

脚本

$('.tab-link').on('click', function(event) {
    event.preventDefault();
    var target = $('[data-toggle="tab"][href="' + this.hash + '"]');
    
    target.trigger('click');
    target[0].scrollIntoView(true);
});

::::::::::::::::::::::::::::::::::::::::::::::: :::::::::: 问题引导 5 :::::::::::

我的 Bootstrap 5 示例正在滚动查看，但未打开选项卡。 选项卡工作正常。 —> https://codepen.io/Chacapamac/pen/wvyPLdG

我的代码： 仅 Bootstap 4 代码的更改** - 我将“data-toggle”替换为“data-bs-toggle”（在 html、js 中）

HTML

<div class="big-spacer"> <a href="#forgot-password" class="tab-link">Go to Forget Password</a> 
<br /><br />
Other test link here
</div>
<div class="big-spacer"> <a href="#forgot-password" class="tab-link">Go to Forget Password</a> </div>
—————————————————————————————————————————————
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="log-in-tab" data-bs-toggle="tab" href="#log-in" role="tab" aria-controls="log-in" aria-selected="true">Log in</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="forgot-password-tab" data-bs-toggle="tab" href="#forgot-password" role="tab" aria-controls="forgot-password" aria-selected="false">Forgot password</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="sign-up-tab" data-bs-toggle="tab" href="#sign-up" role="tab" aria-controls="sign-up" aria-selected="false">Sign up</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="log-in" role="tabpanel" aria-labelledby="log-in-tab">
        Login tab<br />
    </div>
    
    <div class="tab-pane fade" id="forgot-password" role="tabpanel" aria-labelledby="forgot-password-tab">
        Forgot password tab
    </div>

    <div class="tab-pane fade" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">
        Sign-up tab
    </div>
</div>
<br /><br /><br /><br />
I also try to replace href in the nav by data-bs-target

CSS

html { 
  padding: 20px !Important;
  margin: 20px !Important;
}

div.big-spacer { height: 800px;

}

脚本

$('.tab-link').on('click', function(event) {
    event.preventDefault();
    var target = $('[data-bs-toggle="tab"][href="' + this.hash + '"]');
    
    target.trigger('click');
    target[0].scrollIntoView(true);
});

Answer 1

如果您使用 Bootstrap 5，则无需编写 Javascript/jQuery 即可使选项卡正常工作。

现在，要根据 Bootstrap 更新选项卡，请找到下面的 HTML 代码

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <a href="http://google.com" target="_blank" class="nav-link" id="contact-tab" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</a>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home Content</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile Content</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Contact Content</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">Disabled Content</div>
</div>

此代码适用于打开的选项卡，“联系人”选项卡将您拖到谷歌的外部链接和禁用的选项卡。

希望有帮助！

快乐编码！！