Bootstrap 4 - 链接到特定选项卡 [英] Bootstrap 4 - Link to specific tab

查看：31
本文介绍了Bootstrap 4 - 链接到特定选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 Wordpress 网站中设置了 Bootstrap 4 选项卡，并希望从另一个页面链接链接到特定选项卡:

Index.php:

<a href="<?php echo get_site_url(); ?>/services/#innovation">发现更多</a>

Services.php:

<ul class="nav nav-tabs text-xs-center" role="tablist"><li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#innovation" role="tab" aria-expanded="true"><h4>创新&<br/>调查</h4></a><li class="nav-item"><a class="nav-link" data-toggle="tab" href="#electronic-engineering" role="tab" aria-expanded="false"><h4>电子<br/>工程</h4></a><li class="nav-item"><a class="nav-link Manufacturing" data-toggle="tab" href="#manufacturing" role="tab" aria-expanded="false"><h4>制造</h4></a><!-- 标签窗格--><div class="tab-content clearfix"><!-- 创新--><div class="tab-pane active" id="innovation" role="tabpanel" aria-expanded="true"><div data-aos="fade" data-aos-duration="2000" class="col-sm-5">内容

<!-- 电子工程--><div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="electronic-engineering" role="tabpanel" aria-expanded="false"><div class="col-sm-5">内容

<!-- 制造--><div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="manufacturing" role="tabpanel" aria-expanded="false"><div class="col-sm-5">内容

Javascript:

//启用链接到选项卡的 Javascriptvar url = document.location.toString();如果 (url.match('#')) {$('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');}//添加后缀//更改页面重新加载的哈希值$('.nav-tabs a').on('shown.bs.tab', function (e) {window.location.hash = e.target.hash;})

我尝试过这个解决方案但没有成功:- Twitter Bootstrap 标签:转到特定页面重新加载或超链接标签

谢谢

解决方案

我会推荐这样的东西/使用 pushState - 否则你的浏览器会滚动到你的 ID:

$(function() {$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {history.pushState({}, '', e.target.hash);});var hash = document.location.hash;var prefix = "tab_";如果(哈希){$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');}});

I have a Bootstrap 4 tabs set in a Wordpress website and want to link to a specific tab from another page link:

Index.php:

<a href="<?php echo get_site_url(); ?>/services/#innovation">Discover More</a>

Services.php:

<!-- Nav tabs -->
            <ul class="nav nav-tabs text-xs-center" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#innovation" role="tab" aria-expanded="true">
                        <h4>Innovation &<br/>Investigation</h4>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#electronic-engineering" role="tab" aria-expanded="false">
                        <h4>Electronic<br/>Engineering</h4>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link manufacturing" data-toggle="tab" href="#manufacturing" role="tab" aria-expanded="false">
                        <h4>Manufacturing</h4>
                    </a>
                </li>
            </ul>

<!-- Tab panes -->
            <div class="tab-content clearfix">

                <!-- Innovation -->
                <div class="tab-pane active" id="innovation" role="tabpanel" aria-expanded="true">
                    <div data-aos="fade" data-aos-duration="2000" class="col-sm-5">
                        Content
                    </div>
                </div>

                <!-- Electronic Engineering -->
                <div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="electronic-engineering" role="tabpanel" aria-expanded="false">
                    <div class="col-sm-5">
                        Content
                    </div>
                </div>

                <!-- Manufacturing -->
                <div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="manufacturing" role="tabpanel" aria-expanded="false">
                    <div class="col-sm-5">
                        Content
                    </div>
                </div>
            </div>

Javascript:

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');
} //add a suffix

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})

I had tried this solutions but without success: - Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

Thanks

解决方案

I would recommend something like this / use pushState - otherwise your browser scrolls to your ID:

$(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    history.pushState({}, '', e.target.hash);
  });

  var hash = document.location.hash;
  var prefix = "tab_";
  if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
  }
});

这篇关于Bootstrap 4 - 链接到特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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