Я использую Bootstrap nav-tabs
со следующей настройкой:
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<label>Name:</label>
<input type="text" value="fooBar" class="input-xlarge">
</form>
</div>
<div class="tab-pane fade" id="profile">
<form id="tab2">
<a href="#home">Home</a>
</form>
</div>
</div>
Как вы можете видеть, у меня есть ссылка на вкладке profile
, которая ссылается на первую вкладку. При нажатии на якорь изменяется URL-адрес в строке URL-адреса, однако он не переходит на конкретную вкладку.
Затем я заметил, что, как правило, невозможно напрямую ссылаться на вкладку, поэтому я добавил следующий код из Twitter Bootstrap Tabs: перейдите на специальную вкладку на странице Reload или Hyperlink:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})
Теперь я могу ссылаться на конкретную вкладку из другого места, но нет, если я на той же странице, где находится nav-bar. Перезагрузка страницы затем переместилась бы на нужную вкладку, поэтому я подумал, что могу просто принудительно перезагрузить страницу с помощью решения Javascript: как по-настоящему перезагрузить сайт тегом привязки?:
window.location.reload(true);
Это, однако, закончилось перезагрузкой каждый раз, когда я нажимал на вкладку, кроме того, она все еще не загружала вкладку home
при нажатии на якорь.
Таким образом, как бы перейти к заданной id
с другой вкладки?