如何从外部链接导航到Bootstrap 4的特定选项卡 [英] How to navigate to specific tab of bootstrap 4 from external link
本文介绍了如何从外部链接导航到Bootstrap 4的特定选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想从外部页面链接中打开引导程序4的特定标签.
I want to open a specific tab of bootstrap 4 from external page link .
第1页:nav.html，我想从这一页转到第二页
Page 1: nav.html I want to go from this page one to second page
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="index.html#tab-1">tab 1</a>
<a href="index.html#tab-2">tab 2</a>
<a href="index.html#tab-3">tab 3</a>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
第2页:index.html我要在其中打开特定标签页的页面
Page 2: index.html this page where I want to open specific tab
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tab</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div>
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-1">Tab 1</a></li>
<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-2">Tab 2</a></li>
<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-3">Tab 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="tab-1">
<p>Content for tab 1.</p>
</div>
<div class="tab-pane" role="tabpanel" id="tab-2">
<p>Content for tab 2.</p>
</div>
<div class="tab-pane" role="tabpanel" id="tab-3">
<p>Content for tab 3.</p>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
我在页面中使用引导程序4.
I use bootstrap 4 in my page.
推荐答案
您只需要将此代码添加到index.html页面的底部:
You just need to add this code to the bottom of the index.html page:
<script>
jQuery(document).ready(function ($) {
let selectedTab = window.location.hash;
$('.nav-link[href="' + selectedTab + '"]' ).trigger('click');
})
</script>
这篇关于如何从外部链接导航到Bootstrap 4的特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
