深度链接引导

Question

我正在尝试实现与bootstrap 5的深度链接，以便在URL example.com/page#vehicle-finance-calc中使用id时自动打开正确的选项卡

<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-vehicledata-tab" data-bs-toggle="tab" data-bs-target="#nav-vehicledata" type="button" role="tab" aria-controls="nav-vehicledata" aria-selected="true">All Vehicle Specs</button>
<button class="nav-link" id="nav-finance-calc-tab" data-bs-toggle="tab" data-bs-target="#nav-finance-calc" type="button" role="tab" aria-controls="nav-finance-calc" aria-selected="false">Finance Calculator</button>
</div>
</nav>

感谢

Answer 1

根据这个答案，您可以使用以下代码(使用jquery):

$('document').ready(function(){
let selectedTab = window.location.hash;
let tabTrigger = new bootstrap.Tab($('.nav-link[href="' + selectedTab + '"]:first' ));
tabTrigger.show();
});

更新:在现代浏览器中，您可以选择使用纯JavaScript语法。此外，我还添加了对一种模式的代码支持，在这种模式下，选项卡可以通过"data"激活。属性，而不是通过链接:

document.addEventListener('DOMContentLoaded', function(){
let selectedTab = window.location.hash;
let tabTrigger = new bootstrap.Tab( document.querySelector('.nav-link[href="' + selectedTab + '"]') ?? document.querySelector('button[data-bs-target="' + selectedTab + '"]') );
tabTrigger.show();
});

Answer 2

我搜索了几个小时，发现了这个链接。它只适用于我所能看到的-我确实尝试过按钮，但那不起作用。

---

index . html

<a href="page.html#home">Home</a> | <a href="page.html#profile">Profile</a> | <a href="page.html#contact">Contact</a> | 

page.html

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">contact</div>
</div>

Javascript(香草)

// deep linking - load tab on refresh
let url = location.href.replace(//$/, '');
if (location.hash) {
const hash = url.split('#');
const currentTab = document.querySelector('#myTab a[href="#' + hash[1] + '"]');
const curTab = new bootstrap.Tab(currentTab);
curTab.show();
url = location.href.replace(//#/, '#');
history.replaceState(null, null, url);
setTimeout(() => {
window.scrollTop = 0;
}, 400);
}
// change url based on selected tab
const selectableTabList = [].slice.call(document.querySelectorAll('a[data-bs-toggle="tab"]'));
selectableTabList.forEach((selectableTab) => {
const selTab = new bootstrap.Tab(selectableTab);
selectableTab.addEventListener('click', function () {
var newUrl;
const hash = selectableTab.getAttribute('href');
if (hash == '#home-tab') {
newUrl = url.split('#')[0];
} else {
newUrl = url.split('#')[0] + hash;
}
history.replaceState(null, null, newUrl);
});
}); 

---

在我的情况下，我不希望我所有的UL使用相同的ID。所以我在JS中将其改为class，并将该类添加到我的ul中。

JS

const currentTab = document.querySelector('.deepLink a[href="#' + hash[1] + '"]');

html

<ul class="nav nav-pills nav-fill deepLink" role="tablist">

---

奖项颁给Viper

https://www.viperswebdesign.com/blog/how-to-add-deep-linking-to-the-bootstrap-5-tabs-component

Answer 3

这是Bootstrap 5的现代香草js版本。https://codepen.io/localhorst/pen/dyqbboY

(function () {
'use strict'
// deep linking
if(location.hash){
const triggerEl = document.querySelector(location.hash)
bootstrap.Tab.getOrCreateInstance(triggerEl).show() // Select tab by name
}
// add hash to url when changing tabs
const selectableTabList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
selectableTabList.forEach((selectableTab) => {
selectableTab.addEventListener('shown.bs.tab', event => {
console.log('Previous URL: ' + location.href);
history.replaceState(null, null, '#' + event.target.id);
})
});
})()