web-dev-qa-db-fra.com

Aller à un onglet spécifique depuis un autre onglet avec les onglets de navigation Bootstrap

J'utilise le 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 constater, il existe un lien dans l'onglet profile, qui renvoie au premier onglet. Cliquer sur l'ancre change l'URL dans la barre d'URL, mais cela ne permet pas d'accéder à l'onglet spécifique.

J'ai alors remarqué qu'il n'était généralement pas possible de créer un lien direct vers un onglet. J'ai donc ajouté le code suivant à partir de Onglets Bootstrap de Twitter: Accédez à l'onglet spécifique dans Rechargement de page ou lien hypertexte :

// 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 ailleurs, mais pas si je suis sur la même page que la barre de navigation. Recharger la page passerait ensuite à l'onglet souhaité, j'ai donc pensé pouvoir recharger la page avec force, avec la solution de Javascript: comment recharger réellement un site avec une balise d'ancrage? :

window.location.reload(true);

Cela a toutefois entraîné un rechargement à chaque fois que j'ai cliqué sur un onglet, mais il n'a toujours pas chargé l'onglet home lorsque vous avez cliqué sur l'ancre.

Ainsi, comment pourrais-je sauter à une id donnée depuis un autre onglet?

javascripttwitter-bootstraptabs
11
cherrun

Vous avez peut-être été mal pris par les autres réponses que vous avez mentionnées ... il est assez simple de changer d'onglet à partir de la même page (que vous soyez dans un autre onglet ou non): vous pouvez utiliser le bootstrap de base onglet navigation Javascript pour cela.

Commencez par changer un peu votre code HTML: 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 ready:

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

Exemple de travail à jsFiddle .

38
Marijn

La réponse donnée 

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

peut également être utilisé pour faire passer un logiciel JavaScript à un onglet spécifique. Supposons que vous souhaitiez accéder à un onglet spécifique au démarrage en utilisant l’URL:

http://myDomain/myApp#tabSomewhere

Vous pouvez imaginer que cela fonctionnera (vous devez créer du code supplémentaire) . Supposons que votre première page se trouve sur le tabHome (vous le rendez actif avec la classe 'active'. Lorsque vous essayez de revenir à cette page en utilisant javascript vous devez supprimer la classe active de tabHome en utilisant:

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