Bootstrap 4 - 链接到特定选项卡

Posted 2023-05-08

【中文标题】Bootstrap 4 - 链接到特定选项卡

【英文标题】：Bootstrap 4 - Link to specific tab

【发布时间】：2017-08-21 10:45:35

【问题描述】：

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

索引.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;
)

我曾尝试过这种解决方案，但没有成功： - Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

谢谢

【问题讨论】：

你能贴出你也试过的Javascript代码吗？

@ZimSystem 我试过这个： // Javascript 来启用标签链接 var url = document.location.toString(); if (url.match('#')) $('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('显示'）; //添加后缀 // 更改页面重新加载的哈希 $('.nav-tabs a').on('shown.bs.tab', function (e) window.location.hash = e.target.哈希；)

【参考方案1】：

我会推荐这样的东西/使用 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_";
  if (hash) 
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
  
);

【讨论】：

@oyshiu 我可以确认这与 bootstrap 4 一起使用。history.pushState(, '', e.target.hash); 会变魔术。谢谢你的回答。

【参考方案2】：

它不起作用，因为您需要在页面加载时调用.tab('show') 之前附加shown.bs.tab 处理程序。

// wire up shown event
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
    console.log("tab shown...");
);

// read hash from page load and change tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) 
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
 

Bootstrap 4 - 页面加载时的活动标签

代码：http://www.codeply.com/go/Yu8wbjeGMZ 演示：http://www.codeply.com/render/Yu8wbjeGMZ#tab2

【讨论】：

谢谢，但它不起作用。 :( 你可以在这里看到一个活生生的例子 - exatronic.pt/services

链接失效了

点击选项卡时如何更改位置哈希的代码？

【参考方案3】：

这就是我使用 Bootstrap 4 的地方。您只需要确保您的散列它是锚 (a href) 标记的 id。

$(function() 
    $(document.location.hash).tab('show');
);