如何从外部链接打开标签? [英] How to open a tab from external link?

查看：14
本文介绍了如何从外部链接打开标签?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的网页使用的是 Bootstrap 4，我的导航标签有问题.

我需要从登录标签内容页面通过那里的超链接打开一个忘记密码标签.

以下代码在 Bootstrap 3 中对我有效，但在 Bootstrap 4 中无效

    <li class="nav-item"><a class="nav-link active" href="#log-in" data-toggle="tab">登录</a></li><li class="nav-item"><a class="nav-link" href="#forgot-password" data-toggle="tab">忘记密码</a></li><li class="nav-item"><a class="nav-link" href="#sign-up" data-toggle="tab">注册</a></li>
<div class="tab-content"><div class="tab-pane淡出显示活动"id="登录">登录选项卡<a href="#forgot-password" data-toggle="tab">转到忘记密码</a>

<div class="tab-pane fade" id="forgot-password">忘记密码选项卡</div><div class="tab-pane fade" id="sign-up">sign-up tab</div>

解决方案

我能想到两种方法来解决这个问题:

  1. 由于 Bootstrap 4 不使用 url #hashes 进行标签导航，一个简单的 javascript 可以监听常规链接上的点击事件并触发额外的点击——在引擎盖– 在相应的选项卡上.
  2. 使用 url #hashes 并根据该值的变化打开标签.这种方法的另一个优点是选项卡可以直接链接，因此您可以使用例如example.com#sign-up 打开特定标签页.

您会在下面找到每种方法的两个片段.

1.幕后点击:

$('.tab-link').on('click', function(event) {//防止url改变event.preventDefault();//`this` 是被点击的 标签$('[data-toggle="tab"][href="' + this.hash + '"]').trigger('click');})

<div class="tab-content" id="myTabContent"><div class="tab-pane淡出显示活动" id="log-in" role="tabpanel" aria-labelledby="log-in-tab">登录选项卡<br/><a href="#forgot-password" Xdata-toggle="tab" class="tab-link">转到忘记密码</a>

<div class="tab-panefade" id="forgot-password" role="tabpanel" aria-labelledby="forgot-password-tab">忘记密码选项卡

<div class="tab-pane fade" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">注册选项卡

<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() {函数 onHashChange() {var hash = window.location.hash;如果(哈希){//使用 ES6 模板字符串语法$(`[data-toggle="tab"][href="${hash}"]`).trigger('click');}}window.addEventListener('hashchange', onHashChange, false);onHashChange();});

<div class="tab-content" id="myTabContent"><div class="tab-pane淡出显示活动" id="log-in" role="tabpanel" aria-labelledby="log-in-tab">登录选项卡<br/><a href="#forgot-password" Xdata-toggle="tab" class="tab-link">转到忘记密码</a>

<div class="tab-panefade" id="forgot-password" role="tabpanel" aria-labelledby="forgot-password-tab">忘记密码选项卡

<div class="tab-pane fade" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">注册选项卡

<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>

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.

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:

  1. As Bootstrap 4 does not use the url #hashes 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.
  2. Use url #hashes 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. Under the hood clicks:

$('.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. Using hashes in 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>

这篇关于如何从外部链接打开标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆