Saut à onglet spécifique d'un autre onglet avec nav-onglets de Bootstrap

Question

J'utilise nav-tabs de Bootstrap avec la configuration suivante:

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

Comme vous pouvez le voir, j'ai un lien dans mon onglet profile, qui relie à le premier onglet. Cliquer sur l'ancre change l'URL dans la barre d'URL, mais ne passe pas à l'onglet spécifique.

Je remarquai alors qu'il est généralement impossible de créer un lien vers un onglet directement, alors j'ai ajouté le code suivant de 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; 
}) 

Maintenant, je peux créer un lien vers un onglet spécifique d'ailleurs, mais pas , si je suis sur la même page où se trouve la barre de navigation. Rechargement la page serait alors passer à l'onglet voulu, donc je pensais que je pouvais recharger avec force la page, avec la solution de Javascript: How to truly reload a site with an anchor tag?:

window.location.reload(true); 

Cependant, cela a fini dans un reload chaque fois que je clique sur un onglet, en outre, il n'a toujours pas chargé l'onglet home, lorsque vous avez cliqué sur l'ancre.

Ainsi, comment pourrais-je sauter à un id donné à partir d'un autre onglet?

Answer 1

Vous avez peut-être été mis sur le mauvais pied par les autres réponses que vous mentionnez ... il est assez trivial de changer d'onglet depuis la même page (que vous soyez dans un autre onglet ou non): vous pouvez utilisez le bootstrap de base tab navigation Javascript pour cela.

d'abord changer votre code html un peu: ajoutez un identifiant à votre <ul class="nav nav-tabs" id="myTab">.. puis ajoutez un lien vers votre deuxième onglet:

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

et ajoutez ce qui suit dans votre document prêt:

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

travail exemple à jsFiddle.

Answer 2

La réponse

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

peut également être utilisé pour faire un saut de logiciel JavaScript à un onglet spécifique. Supposons que vous voulez passer à un onglet spécifique au démarrage en utilisant l'URL:

http://myDomain/myApp#tabSomewhere 

Vous pouvez imaginer cela fonctionnera (vous devez faire un peu de codage supplémentaire). Supposons que votre première page est sur le tabHome (vous faites qui active avec la classe « active » Lorsque vous essayez de revenir à cette page en utilisant javascript vous devez supprimer la classe active de la tabHome en utilisant:.

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