我正在开发一个网页,其中我使用Twitter的引导框架和他们的引导标签JS。它的工作很好,除了一些小问题,其中之一是我不知道如何直接从外部链接到一个特定的选项卡。例如:
<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>
当从外部页面点击链接时,应该分别转到Home选项卡和Notes选项卡
我正在开发一个网页,其中我使用Twitter的引导框架和他们的引导标签JS。它的工作很好,除了一些小问题,其中之一是我不知道如何直接从外部链接到一个特定的选项卡。例如:
<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>
当从外部页面点击链接时,应该分别转到Home选项卡和Notes选项卡
当前回答
基于Peter的回答,并结合https://stackoverflow.com/a/901144/1604205,下面是JS中的代码:
<script>
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
$activetabhome = (params.activeTab === null || params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';
</script>
<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>
其他回答
如果这对任何人来说都很重要,下面的代码很小,工作完美无缺,从URL中获得一个哈希值并显示:
<script>
window.onload = function () {
let url = document.location.toString();
let splitHash = url.split("#");
if (splitHash[1]) {document.getElementById(splitHash[1]).click();}
};
</script>
它所做的是检索id并触发单击事件。简单。
我不得不修改一些比特这为我工作。 我使用Bootstrap 3和jQuery 2
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "!";
if (hash) {
hash = hash.replace(prefix,'');
var hashPieces = hash.split('?');
activeTab = $('[role="tablist"] a[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
}
// Change hash for page-reload
$('[role="tablist"] a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
我知道这个线程非常旧,但我将在这里留下我自己的实现:
$(function () {
// some initialization code
addTabBehavior()
})
// Initialize events and change tab on first page load.
function addTabBehavior() {
$('.nav-tabs a').on('show.bs.tab', e => {
window.location.hash = e.target.hash.replace('nav-', '')
})
$(window).on('popstate', e => {
changeTab()
})
changeTab()
}
// Change the current tab and URL hash; if don't have any hash
// in URL, so activate the first tab and update the URL hash.
function changeTab() {
const hash = getUrlHash()
if (hash) {
$(`.nav-tabs a[href="#nav-${hash}"]`).tab('show')
} else {
$('.nav-tabs a').first().tab('show')
}
}
// Get the hash from URL. Ex: www.example.com/#tab1
function getUrlHash() {
return window.location.hash.slice(1)
}
注意,我使用了一个导航类前缀来导航链接。
你可以在相应的TAB链接上触发一个点击事件:
$(document).ready(function(){
if(window.location.hash != "") {
$('a[href="' + window.location.hash + '"]').click()
}
});
用于引导5.1重定向到特定的选项卡
var hash = location.hash.replace(/^#/, '');
if (hash) {
var someVarName = $('.nav-tabs a[href="#' + hash + '"]');
var tab = new bootstrap.Tab(someVarName);
tab.show();
}
更改页面重新加载的散列
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
window.scrollTo(0, 0);
})