[英]Bootstrap 4 - Link to specific tab
I have a Bootstrap 4 tabs set in a Wordpress website and want to link to a specific tab from another page link:我在 Wordpress 网站中设置了 Bootstrap 4 选项卡,并希望从另一个页面链接链接到特定选项卡:
Index.php:索引.php:
<a href="<?php echo get_site_url(); ?>/services/#innovation">Discover More</a>
Services.php:服务.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:
// 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我曾尝试过此解决方案但没有成功: - Twitter Bootstrap Tabs:转到页面重新加载或超链接上的特定选项卡
Thanks谢谢
I would recommend something like this / use pushState - otherwise your browser scrolls to your ID:我会推荐这样的东西/使用 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');
}
});
It's not working because you need to attach the shown.bs.tab
handler before calling .tab('show')
on page load.它不起作用,因为您需要在页面加载时调用
.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 - Active Tab on Page Load Bootstrap 4 - 页面加载时的活动选项卡
Code: http://www.codeply.com/go/Yu8wbjeGMZ代码: http : //www.codeply.com/go/Yu8wbjeGMZ
Demo: http://www.codeply.com/render/Yu8wbjeGMZ#tab2演示: http : //www.codeply.com/render/Yu8wbjeGMZ#tab2
This is where I landed with Bootstrap 4. You just need to make sure your hash it the id of the anchor (a href) tag.这就是我使用 Bootstrap 4 的地方。你只需要确保你的哈希值是锚(a href)标签的 id。
$(function() {
$(document.location.hash).tab('show');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.