最后，我看到了this topic，并使用提供的代码使其工作。
解决方案 1：
我不得不将我的单选按钮更改为经典的 ul>li 选项卡。
<div class="tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="left-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="log-in" aria-selected="true">My first tab</a>
</li>
<li class="nav-item">
<a class="nav-link" id="right-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="forgot-password" aria-selected="false">My second tab</a>
</li>
</ul>
<div class="tab active" id="tab1"></div>
<div class="tab" id="tab2"></div>
</div>
并像这样更改了我的 js 代码：
1-首先，在标签内正确显示地图
$('.nav-item a').on('click', function() {
setTimeout(function() {
map.invalidateSize();
map2.invalidateSize();
}, 0);
});
2-然后，切换选项卡并让外部 url 打开所需的选项卡
$(document).ready(function() {
$('#left-tab').click(function(event) {
event.preventDefault();
$('.tabs .nav-item a').removeClass('active');
$('.tabs .tab').removeClass('active');
$(this).addClass('active');
$('#tab1').addClass('active');
})
$('#right-tab').click(function(event) {
event.preventDefault();
$('.tabs .nav-item a').removeClass('active');
$('.tabs .tab').removeClass('active');
$(this).addClass('active');
$('#tab2').addClass('active');
})
function onHashChange() {// this let me open tabs from an external url
var hash = window.location.hash;
if (hash) {
$(`[data-toggle="tab"][href="${hash}"]`).trigger('click');
}
}
window.addEventListener('hashchange', onHashChange, false);
onHashChange();
});
问题已部分解决。
- 进入页面后，如果我单击选项卡，则 url/hash 不再更改。
- 另外，选项卡会在 ID 所在的位置打开，这很正常，但在我的示例中，我相反希望禁用锚点跳转。
解决方案 2：
所以我不得不做一些改变：
$(document).ready(function() {
$('#left-tab').click(function(e) {
window.location.hash = $(this).attr("href"); //this put back the hash
if (location.hash) { // this allow to stay on top of the page
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
}
e.preventDefault()
$('.tabs .nav-item a').removeClass('active');
$('.tabs .tab').removeClass('active');
$(this).addClass('active');
$('#tab1').addClass('active');
})
$('#right-tab').click(function(e) {
window.location.hash = $(this).attr("href");
if (location.hash) {
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
}
e.preventDefault();
$('.tabs .nav-item a').removeClass('active');
$('.tabs .tab').removeClass('active');
$(this).addClass('active');
$('#tab2').addClass('active');
})
function onHashChange() { // this let me open tabs from an external url
var hash = window.location.hash;
if (hash) {
// using ES6 template string syntax
$(`[data-toggle="tab"][href="${hash}"]`).trigger('click');
}
}
window.addEventListener('hashchange', onHashChange, false);
onHashChange();
});
现在效果更好了。当我来自外部 URL 时，例如 mysite.com#tab2，它会加载打开 tab2 的页面。然后，当我单击 tab1 时，它会打开 tab1，并停留在页面顶部。但是，它仍然不完美，仍然存在故障。
解决方案 3：
于是我寻找其他解决方案，发现this topic 和@jumois 的答案在于使用
'目标元素的 id 与
锚。'
所以我再次像这样更改了我的代码：
$(document).ready(function() {
$('#lefttab').click(function(e) {
$(window).on("hashchange", function(){
var hash = this.location.hash;
var mytab = $(hash + "-tab");
});
$('.tabs .nav-item a').removeClass('active');
$('.tabs .tab').removeClass('active');
$(this).addClass('active');
$('#tab1-tab').addClass('active');
})
$('#righttab').click(function(e) {
$(window).on("hashchange", function(){
var hash = this.location.hash;
var mytab = $(hash + "-tab");
});
$('.tabs .nav-item a').removeClass('active');
$('.tabs .tab').removeClass('active');
$(this).addClass('active');
$('#tab2-tab').addClass('active');
})
function onHashChange() {
var hash = window.location.hash;
if (hash) {
// using ES6 template string syntax
$(`[data-toggle="tab"][href="${hash}"]`).trigger('click');
}
}
window.addEventListener('hashchange', onHashChange, false);
onHashChange();
});
当然，我也必须更改 html 部分：
<div class="tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="lefttab" data-toggle="tab" href="#tab1" role="tab" aria-controls="log-in" aria-selected="true">My first tab </a>
</li>
<li class="nav-item">
<a class="nav-link" id="righttab" data-toggle="tab" href="#tab2" role="tab" aria-controls="forgot-password" aria-selected="false">My second tab</a>
</li>
</ul>
<div class="tab active" id="tab1-tab"></div>
<div class="tab " id="tab2-tab"></div>
</div>
现在看起来好多了。我可以从外部 url 打开一个标签，比如 mysite.com#tab2
并且不再有“跳转到锚点”的故障效果。