我正在为我的网页使用 Bootstrap 4,我遇到了导航选项卡的问题。
我需要通过超链接从登录选项卡内容页面打开忘记密码选项卡。
下面的代码在引导程序 3 中对我有用,但在引导程序 4 中不起作用
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link active" href="#log-in" data-toggle="tab">Log in</a></li>
<li class="nav-item"><a class="nav-link" href="#forgot-password" data-toggle="tab">Forgot password</a></li>
<li class="nav-item"><a class="nav-link" href="#sign-up" data-toggle="tab">Sign up</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="log-in">
Login tab
<a href="#forgot-password" data-toggle="tab">Go to Forget Password</a>
</div>
<div class="tab-pane fade" id="forgot-password">Forgt password tab</div>
<div class="tab-pane fade" id="sign-up">sign-up tab</div>
</div>
我能想到两种方法来解决这个问题:
- 由于 Bootstrap 4 不使用 url
#hash
es 进行选项卡导航,因此一个简单的 JavaScript 可以侦听常规链接上的点击事件,并在相应的标签上触发额外的点击。 - 使用 url
#hash
es,并根据该值的变化打开选项卡。这种方法还具有选项卡可直接链接的优点,因此您可以使用例如 example.com#sign-up 打开打开特定选项卡的页面。
您将在下面找到每种方法的两个代码片段。
1. 引擎盖下的点击:
$('.tab-link').on('click', function(event) {
// Prevent url change
event.preventDefault();
// `this` is the clicked <a> tag
$('[data-toggle="tab"][href="' + this.hash + '"]').trigger('click');
})
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="log-in-tab" data-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-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-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 />
<a href="#forgot-password" Xdata-toggle="tab" class="tab-link">Go to Forget Password</a>
</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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
2. 在网址中使用哈希:
$(document).ready(function() {
function onHashChange() {
var hash = window.location.hash;
if (hash) {
// using ES6 template string syntax
$(`[data-toggle="tab"][href="${hash}"]`).trigger('click');
}
}
window.addEventListener('hashchange', onHashChange, false);
onHashChange();
});
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="log-in-tab" data-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-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-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 />
<a href="#forgot-password" Xdata-toggle="tab" class="tab-link">Go to Forget Password</a>
</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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
这可以通过jQuery通过触发一个函数来实现,该函数在单击链接时更改选项卡。
.HTML
<ul class="nav nav-tabs" role="tablist" id="myTabs">
<li class="nav-item">
<a class="nav-link active" href="#log-in" data-toggle="tab">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#forgot-password" data-toggle="tab">Forgot password</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sign-up" data-toggle="tab">Sign up</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="log-in">
Login tab
<a href="#forgot-password" data-toggle="tab" class="forgot-password-link">Go to Forget Password</a>
</div>
<div class="tab-pane fade" id="forgot-password">Forgt password tab</div>
<div class="tab-pane fade" id="sign-up">sign-up tab</div>
</div>
爪哇语
$( ".forgot-password-link" ).click(function() {
$('#myTabs li:nth-child(2) a').tab('show')
});
代码笔示例:https://codepen.io/Washable/pen/VQYewy