Przejdź do określonej karty z innej karty za pomocą zakładek nawigacyjnych Bootstrap
Używam Bootstrapanav-tabs
z następującą konfiguracją:
<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>
Jak widzisz, mam link w moimprofile
karta, która prowadzi do pierwszej karty. Kliknięcie kotwicy powoduje zmianę adresu URL w pasku adresu URL, ale nie przeskakuje do określonej karty.
Wtedy zauważyłem, że zazwyczaj nie można bezpośrednio połączyć się z kartą, więc dodałem następujący kodZakładki Bootstrap Twittera: Przejdź do zakładki Specific na stronie Reload lub 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;
})
Teraz mogę połączyć się z konkretną kartą z innego miejsca, ale nie, jeśli jestem na tej samej stronie, na której znajduje się pasek nawigacyjny. Ponowne załadowanie strony przeskoczyłoby wtedy do zakładki żądanej, więc pomyślałem, że mogę po prostu wymusić ponowne załadowanie strony, z rozwiązaniem zJavascript: jak naprawdę przeładować stronę za pomocą tagu anchor?:
window.location.reload(true);
To jednak przeładowało się za każdym razem, gdy kliknąłem kartę, a ponadto wciąż nie ładowałemhome
zakładka, po kliknięciu na kotwicę.
Jak więc skoczyłbym do danegoid
z innej karty?