Vai alla scheda specifica da un'altra scheda con nav-schede di Bootstrap

Question

sto usando Bootstrap di nav-tabs con la seguente configurazione:

<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> 

Come potete vedere, ho un link nella mia scheda profile, che collega a la prima scheda Cliccando sull'ancora cambia l'URL nella barra degli indirizzi, ma non passa alla scheda specifica.

Ho poi notato che non è generalmente possibile collegare a una scheda direttamente, così ho aggiunto il seguente codice da 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; 
}) 

Ora posso creare un collegamento a una scheda specifica da qualche altra parte, ma non , se sono sulla stessa pagina in cui si trova la barra di navigazione. Ricaricare la pagina sarebbe poi passare alla scheda voluto, così ho pensato che avrei potuto solo con forza ricaricare la pagina, con la soluzione da Javascript: How to truly reload a site with an anchor tag?:

window.location.reload(true); 

Questo però ha causato la ricarica ogni volta che ho cliccato su una scheda, inoltre, non ha ancora caricato la scheda home, quando si è fatto clic sull'ancoraggio.

Quindi, come passare a un dato id da un'altra scheda?

Answer 1

Potrebbe essere stato messo il piede sbagliato dalle altre risposte che hai citato ... è abbastanza banale cambiare scheda all'interno della stessa pagina (indipendentemente dal fatto che tu sia in un'altra scheda o meno): puoi utilizzare il bootstrap di base tab navigation Javascript per questo.

prima cambiare tuo html un po ': aggiungere un id al vostro <ul class="nav nav-tabs" id="myTab">.. quindi aggiungere un link al tuo seconda scheda:

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

e aggiungere il seguente nel documento pronto:

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

di lavoro esempio su jsFiddle.

Answer 2

La risposta data

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

può anche essere usato per fare un software JavaScript salto per una scheda specifica. Si supponga che si desidera passare a una scheda specifica all'avvio utilizzando l'URL:

http://myDomain/myApp#tabSomewhere 

si può immaginare che funzionerà (è necessario fare un po 'di codice aggiuntivo). Supponiamo che il vostro Prima pagina è sul tabHome (fate che attiva con la classe 'attivo' Quando si tenta di tornare a quella pagina utilizzando JavaScript è necessario rimuovere la classe di attivo dalla tabHome utilizzando:.

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