Skocz do konkretnej zakładki z innej karcie z Bootstrap w nav-kartach

Question

używam Bootstrap na nav-tabs z następującej konfiguracji:

<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 widać, mam łącza w mojej karcie profile, która łączy się pierwsza karta. Kliknięcie kotwicy zmienia adres URL na pasku adresu, ale nie przeskakuje do określonej karty.

I wtedy zauważył, że nie jest na ogół możliwe link do zakładki bezpośrednio, tak I dodaje następujący kod z Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or 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ę dodać odnośnik do konkretnej karcie gdzieś indziej, ale nie , jeśli jestem na tej samej stronie, gdzie znajduje się pasek nawigacyjny. Przeładowywania strony byłyby następnie przejść do zakładki poszukiwanych, więc pomyślałem, że może po prostu mocno odświeżyć stronę, z roztworu z Javascript: How to truly reload a site with an anchor tag?:

window.location.reload(true); 

To jednak skończyło się na przeładowanie przy każdym kliknięciu na zakładkę, ponadto nadal nie załadował karty home po kliknięciu na kotwicę.

W ten sposób, w jaki sposób przeskoczyć do danej id z innej zakładki?

Answer 1

Mogłeś zostać źle postawiony przez inne odpowiedzi, o których wspomniałeś ... zmiana kart z tej samej strony jest dość banalna (niezależnie od tego, czy jesteś w innej zakładce, czy nie): możesz użyj do tego podstawowego bootstrap'a tab navigation Javascript.

Pierwszy zmienić html trochę: dodać identyfikator do Twojego <ul class="nav nav-tabs" id="myTab">.. następnie dodać link do swojej drugiej zakładce:

<div class="tab-pane fade" id="profile"> 
    <form id="tab2"> 
    <a href="#" id="gotohome">Jump to home tab (this works)</a> 
... 

i dodaj następujący w dokumencie gotowe:

$('#gotohome').click(function() { 
    $('#myTab a[href="#home"]').tab('show'); 
}); 

Praca przykład pod adresem jsFiddle.

Answer 2

Podana odpowiedź

$('#myTab a[href="#home"]').tab('show'); 

mogą być również wykorzystywane do wytwarzania oprogramowania JavaScript Przejdź do konkretnej karty. Załóżmy, że chcemy, aby przejść do konkretnej zakładki na początku za pomocą adresu URL:

http://myDomain/myApp#tabSomewhere 

Można sobie wyobrazić, że będzie działać (trzeba wykonać pewne dodatkowe kodowanie). Załóżmy Twoja pierwsza strona jest na tabHome (trzeba zrobić, że aktywna z klasą „aktywny” Podczas próby wrócić do tej strony za pomocą javascript trzeba usunąć aktywną klasę z tabHome użyciu.

$('li').removeClass('active');