Twitter Bootstrap - Onglets - L'URL ne change pas

Question

J'utilise Twitter Bootstrap et ses "onglets".

J'ai le code suivant:

 <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#add">add</a></li>
    <li><a data-toggle="tab" href="#edit" >edit</a></li>
    <li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>
 

Les onglets fonctionnent correctement, mais dans l'URL n'est pas ajouté le #add, #edit, #delete.

Lorsque je supprime data-toggle l'URL change, mais les onglets ne fonctionnent pas.

Des solutions pour cela?

Answer 1

Essayez ce code. Il ajoute un onglet href à url + ouvre un onglet basé sur le hachage lors du chargement de la page:

 $(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});
 

Answer 2

Il y a trois éléments nécessaires pour une solution complète:

1. Afficher l'onglet approprié lorsque le chargement de la page si il y a un hash de l'URL.
2. La modification de la valeur de hachage dans l'URL lorsque l'onglet est modifiée.
3. Modifier l'onglet lorsque le hachage des changements dans l'URL (les boutons suivant / précédent), et assurez-vous que le premier onglet est effectué correctement.

Je ne crois pas que les commentaires ici, ni accepté de répondre, gérer l'ensemble de ces scénarios.

Comme il y a un peu impliqué, je pense que c'est la plus fantastique comme un petit plugin jQuery:

 /**
 * jQuery Plugin: Sticky Tabs
 *
 * @author Aidan Lister <aidan@php.net>
 * @version 1.0.0
 */
(function ( $ ) {
    $.fn.stickyTabs = function() {
        context = this

        // Show the tab corresponding with the hash in the URL, or the first tab.
        var showTabFromHash = function() {
          var hash = window.location.hash;
          var selector = hash ? 'a[href="' + hash + '"]' : 'li:first-child a';
          $(selector, context).tab('show');
        }

        // Set the correct tab when the page loads
        showTabFromHash(context)

        // Set the correct tab when a user uses their back/forward button
        window.addEventListener('hashchange', showTabFromHash, false);

        // Change the URL when tabs are clicked
        $('a', context).on('click', function(e) {
          history.pushState(null, null, this.href);
        });

        return this;
    };
}( jQuery ));

Vous pouvez appeler le plugin comme ceci:

$('.nav-tabs').stickyTabs();

J'ai fait un post de blog pour cette, http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/

Answer 3

À l'aide de data-toggle="tab" demande le plugin pour gérer les onglets, qui, tout en faisant des appels preventDefault sur l'événement (code sur github).

Vous pouvez utiliser votre propre activation de l'onglet, et de laisser de l'événement par le biais de :

$('.nav-tabs a').click(function (e) {
    // No e.preventDefault() here
    $(this).tab('show');
});

Et vous devez supprimer l'attribut data-toggle="tab"

De vérifier la doc si vous avez des doutes.

Answer 4

Comme vos éléments d'ancrage changent déjà le hachage de l'URL, l'écoute de l'événement onhashchange est une autre bonne option. Comme @flori l'a déjà mentionné, cette méthode fonctionne bien avec le bouton Précédent du navigateur.

 var tabs$ = $(".nav-tabs a");

$( window ).on("hashchange", function() {
    var hash = window.location.hash, // get current hash
        menu_item$ = tabs$.filter("[href=" + hash + "]"); // get the menu element

    menu_item$.tab("show"); // call bootstrap to show the tab
}).trigger("hashchange");
 

Enfin, le fait de déclencher l'événement juste après la définition du programme d'écoute vous aidera également à afficher le bon onglet lors du chargement de la page.

Answer 5

Ma solution à votre problème:

D'abord ajouter un nouveau data-value d'attribut pour chaque a lien, comme ceci:

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#tab-add" data-value="#add">add</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-edit" data-value="#edit">edit</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-delete" data-value="#delete">delete</a>
    </li>
</ul>

Deuxièmement, modifier les id des onglets, par exemple, à partir d' add de tab-add , également mise à jour hrefs inclure tab- préfixe:

<div class="tab-content">
    <div class="tab-pane" id="tab-add">Add panel</div>
    <div class="tab-pane" id="tab-edit">Edit panel</div>
    <div class="tab-pane" id="tab-delete">Panel panel</div>
</div>

Et enfin le code js:

<script type="text/javascript">
    $(function () {
        var navTabs = $('.nav-tabs a');
        var hash = window.location.hash;
        hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');

        navTabs.on('shown', function (e) {
            var newhash = $(e.target).attr('data-value');
            window.location.hash = newhash;
        });
    })
</script>

Voici jsFiddle - mais il ne fonctionne pas en raison de l'iframe utilisé par jsFiddle, mais vous pouvez lire la source de ma solution.