我在我的网页上使用Bootstrap 4,我遇到了nav-tabs的问题.
我需要从“登录选项卡内容”页面通过超链接打开“忘记密码”选项卡.
下面的代码在Bootstrap 3中为我工作,但在Bootstrap 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不使用网址#hashes进行标签导航,因此简单的javascript可以在常规链接上收听点击事件,并在相应标签上触发更多点击.
>使用URL #hashes并根据该值的更改打开选项卡.这种方法还具有以下优点:标签可以直接链接,因此您可以使用例如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.在url中使用哈希:
$(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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。