我正在开发一个网页,其中我使用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选项卡
当前回答
如果这对任何人来说都很重要,下面的代码很小,工作完美无缺,从URL中获得一个哈希值并显示:
<script>
window.onload = function () {
let url = document.location.toString();
let splitHash = url.split("#");
if (splitHash[1]) {document.getElementById(splitHash[1]).click();}
};
</script>
它所做的是检索id并触发单击事件。简单。
其他回答
用于引导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);
})
这是我对这个问题的解决方案,可能有点晚了。但它可能会帮助其他人:
// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
$('.nav-tabs a[href="#' + hash + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
@flynfish + @Ztyx解决方案,我用于嵌套选项卡:
handleTabLinks();
function handleTabLinks() {
if(window.location.hash == '') {
window.location.hash = window.location.hash + '#_';
}
var hash = window.location.hash.split('#')[1];
var prefix = '_';
var hpieces = hash.split('/');
for (var i=0;i<hpieces.length;i++) {
var domelid = hpieces[i].replace(prefix,'');
var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
if (domitem.length > 0) {
domitem.tab('show');
}
}
$('a[data-toggle=tab]').on('shown', function (e) {
if ($(this).hasClass('nested')) {
var nested = window.location.hash.split('/');
window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
} else {
window.location.hash = e.target.hash.replace('#', '#' + prefix);
}
});
}
儿童应该有class="nested"
如果这对任何人来说都很重要,下面的代码很小,工作完美无缺,从URL中获得一个哈希值并显示:
<script>
window.onload = function () {
let url = document.location.toString();
let splitHash = url.split("#");
if (splitHash[1]) {document.getElementById(splitHash[1]).click();}
};
</script>
它所做的是检索id并触发单击事件。简单。
我提出了一个解决方案,使用url哈希或localStorage取决于后者的可用性,代码如下:
$(function(){
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
})
var hash = window.location.hash;
var activeTab = localStorage.getItem('activeTab');
if(hash){
$('#project-tabs a[href="' + hash + '"]').tab('show');
}else if (activeTab){
$('#project-tabs a[href="' + activeTab + '"]').tab('show');
}
});