【发布时间】：2022-08-04 22:41:45
【问题描述】：
我的目标是使用外部哈希 (#) 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
我的代码：仅对 Bootstrap 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);
});
标签： tabs bootstrap-5