Dev Faq
12
votes

JQuery UI onglets, URL de mise à jour lorsque vous cliquez sur un autre onglet

J'utilise les onglets de JQuery Ui: http://jqueryui.com/demos/tabs/ < / a>

Comment mettre à jour l'URL actuelle du navigateur Lorsque l'utilisateur clique sur un autre onglet en ajoutant le lien d'ancrage: ex: url.html # onglet-4 et poussant l'historique actuel du navigateur en même temps.

Merci!

3 commentaires

Pouvez-vous donner une autre information s'il vous plaît? Ce n'est pas clair ce que vous demandez ...

ok je vais essayer semble clair pour moi: p

ok fait, laissez-moi savoir si ça va comme ça;)

9 Réponses :

36
votes

pour jQuery ui 1.10 strong> et ultérieur show code> a été obsolète en faveur de activate code>. Aussi id code> n'est plus valide jQuery. Utilisez .attr ('id') code> à la place. Enfin, utilisez sur ('tictsACtivate') code> au lieu de Bind () code>. 

$("#myTabs").bind( "tabsshow", function(event, ui) {
        window.location.hash = ui.panel.id;
});

8 commentaires

Cela fonctionne, mais le navigateur faites défiler vers le bas pour aller à l'ancre L'autre solution est parfaite mais merci :)

Quand vous dites "Vous pouvez aussi ajouter ceci", voulez-vous dire que vous pouvez ou vous devez? La première partie de votre réponse ne fonctionne pas seul. De plus, l'événement .bind () n'est jamais frappé sur ma page.

Vous utilisez probablement une version plus récente de JQuery UI. La méthode montre a été obsolète pour JQuery UI 1.9 et supprimé pour 1.10. Il est maintenant appelé activer . Aussi ID n'est plus pris en charge pour JQuery. Vous devez utiliser .attr ('id') . Modifications ci-dessus.

merci pour le code mis à jour. J'utilise cet onglet ci-dessous un en-tête. Y a-t-il de toute façon pour empêcher un saut à la HREF tout en montrant l'URL?

@Neillittle hmm. Je pensais que le correctif était facile, mais cela ressemble à ceci est un comportement connu. Essayez cette question: Stackoverflow.com/Questions/243794

@Jeffb Je pense que je vais enregistrer et soumettre un bogue. Je pensais que la mise à jour de l'adresse URL prendrait en charge les bots SEO rampant le site.

@Netillez en fait, j'ai repensé cela ... Après une certaine expérimentation, je réalise que le problème est différent de la question que j'ai liée. Le problème, bien sûr, est que vous définissez le hash dans votre barre d'adresse. Le navigateur met donc à jour l'adresse et se déplace à cet emplacement. L'astuce consiste à stocker votre position de défilement actuelle et à la restaurer après avoir défini le hachage. Démo: jsfiddle.net/jtbowden/zsubz/44 Fullscreen: fiddle.jshell.net/jtbowden/zsubz/44/show/light

La solution pour mettre à jour le hachage dans la barre d'URL de la fenêtre du navigateur sans défilement est ici: ​​Stackoverflow.com/questions/8624531/#25577016<< A> Démo ici: JSFIDDLE.net/XSX5U5G2/SHOW/#CATS HTH.

11
votes

Cela devrait obtenir ce que vous voulez (en utilisant JQuery UI 1.8 , Dans la version 1.9 et ultérieure, utilisez la version Activer l'événement , voir les autres réponses pour le code Exemple). J'ai utilisé l'échantillon HTML dans les démos de JQuery UI; 

        $( "#tabs" ).tabs({
            select: function(event, ui) {                   
                window.location.hash = ui.tab.hash;
            }
        });

4 commentaires

Cette plaine ne fonctionne pas. Souhaitez-vous élaborer ou mettre à jour votre réponse?

@ Keycrumbs.looks comme si vous consultez la documentation pour la dernière version où l'événement Select n'est plus pris en charge. La réponse est plus de l'âge de l'âge.Veuillez consulter la documentation de la version 1.8.10, où l'événement a été pris en charge. S'il vous plaît soutenir votre commentaire en publiant votre code pourquoi il ne fonctionne pas ... L'OP a marqué la réponse correcte en disant qu'il a fonctionné pour lui ... Enquêter davantage avant de voter à voter Année Answer.here est un échantillon que j'ai fouillé pour Vous êtes bénéfice expériencesWithWeb.com/testjs/jq.html

@ DG3 Anciennes réponses qui ne sont plus valables doivent être évitées, c'est une façon de garder le site à jour.

@Tobyallen ou mieux encore, mis à jour avec Info pour les versions plus récentes!

1
votes

J'ai dû utiliser "Créer" au lieu d'"activer" pour obtenir mon onglet initial pour afficher dans l'URL: 

    $('#tabs').tabs({
        create: function(event, ui) {
            window.location.hash = ui.panel.attr('id');
        }
    });

1 commentaires

Je me souviens de voir quelque part que pour mettre à jour la page lorsque la balise HASH change en revenant dans l'historique, vous avez besoin d'un JavaScript qui vérifie la valeur hachage de l'URL toutes ces secondes et fait tout ce qu'il faut faire sur la page en fonction de Ce hachage (si vous utilisez le fragment juste pour un ensemble d'onglets, vous pouvez simplement activer l'onglet correspondant).

0
votes

Construire le travail de Jeff B ci-dessus ... cela fonctionne avec jQuery 1.11.1. 

$("#tabs").tabs(); //initialize tabs
$(function() {
    $("#tabs").tabs({
        activate: function(event, ui) {
            var scrollTop = $(window).scrollTop(); // save current scroll position
            window.location.hash = ui.newPanel.attr('id'); // add hash to url
            $(window).scrollTop(scrollTop); // keep scroll at current position
    }
});
});

1 commentaires

Belle solution prenant soin de la position de défilement

0
votes

Une combinaison des autres réponses ici a fonctionné pour moi. XXX

0 commentaires
3
votes

Premièrement, nous devons mettre à jour le hasch sur l'onglet Modifier (ceci est pour la dernière fois JQueryui): xxx

puis nous devons mettre à jour l'onglet Actif sur le changement de hachage (c.-à-d. Permettre l'historique du navigateur, Boutons arrière / avance et saisie de l'utilisateur dans le hachage manuellement): xxx

1 commentaires

Celui-ci fonctionne bien avec code.jquery.com/ui/1.12.1/jquery-ui.js

2
votes 
$( "#tabs" ).tabs({            
        activate: function(event, ui) {
            //Key => random string
            //url => URL you want to set
            window.history.pushState({key:'url'},'','url');
        }
    });
0 commentaires
0
votes

J'ai utilisé cette méthode dans mes onglets réactifs de jQuery à hachage l'URL avec l'onglet actif. 

$(function() {
       $('#tabs, #subtabs').responsiveTabs({
            activate: function(event, ui) {
            window.location.hash = $("ul li.r-tabs-state-active a").attr("href");
        },
        startCollapsed: 'accordion'
       });
});

0 commentaires
0
votes

Bien que cela soit vieux, bon nombre des réponses ne fonctionnent tout simplement pas. Ou travailler avec différentes structures HTML.

SO ... une mise à jour pour 2021 si quelqu'un est intéressé. P> 

<div class="tabs">
    <ul>
    <li><a href="#personalInformation-content">Personal Information</a></li>
    <li><a href="#profileImage-content">Profile Image</a></li>
    <li><a href="#username-content">Username</a></li>
    <li><a href="#password-content">Password</a></li>
    </ul>


    <div class="tab-content" id="personalInformation-content">
    // Some Tab content 
    </div>

    <div class="tab-content" id="profileImage-content">
    // Some Tab content 
    </div>

    <div class="tab-content" id="username-content">
    // Some Tab content 
    </div>

    <div class="tab-content" id="username-content">
    // Some Tab content 
    </div>
</div>

<script>
$('.tabs').tabs({
    activate: function (event, ui) {  window.location.hash = ui.newPanel.attr('id'); }
});

$( ".tabs" ).on( "tabsactivate", function( event, ui ) {
    window.location.hash = ui.newPanel.attr('id');
    });
</script>

0 commentaires

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier