如何从外部链接打开标签页? [英] How to open a tab from external link?
本文介绍了如何从外部链接打开标签页?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在将Bootstrap 4用于我的网页,我的导航标签遇到问题.
I am using Bootstrap 4 for my web page, I am facing problem with the nav-tabs.
我需要通过登录"标签内容"页面上的超链接打开一个忘记密码"标签.
I need to open a Forget Password Tab from the Login Tab Content page via hyperlink there.
下面的代码在Bootstrap 3中对我有用,但在Bootstrap 4中不起作用
Below code is working for me in Bootstrap 3 but not in 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>
推荐答案
我可以想到两种方法来解决此问题:
There are two approaches I can think of to solve this issue:
- 由于Bootstrap 4不使用网址
#hash
es进行标签导航,因此一个简单的javascript可以监听常规链接上的点击事件,并在相应标签下的引擎盖下触发其他点击 - 使用 url
#hash
es并根据该值的更改打开选项卡.这种方法还具有选项卡可以直接链接的优点,因此您可以使用例如example.com#sign-up以打开打开了特定标签的页面.
- As Bootstrap 4 does not use the url
#hash
es for tab navigation, a simple javascript can listen to click events on regular links and trigger additional clicks –under the hood– on the corresponding tabs. - Use url
#hash
es and open tabs based on the change of that value. This approach also have the advantage that the tabs will be directly linkable, so you could use e.g. example.com#sign-up to open a page with a specific tab opened.
下面您将为每种方法找到两个摘要.
Below you will find two snippets for each approach.
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>
这篇关于如何从外部链接打开标签页?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文