jquery - désactive le "saut" d'ancre lors du chargement d'une page

Question

Je pense que cela peut ne pas être possible, vais essayer de l'expliquer du mieux que je peux. J'ai une page contenant des onglets (jquery alimenté), contrôlée par le texte suivant:

Je suis l'aide de ce code, fourni par un autre utilisateur à partir d'une question précédente.

<script type="text/javascript">
    $(function() {

     $('html, body').animate({scrollTop:0}); // this is my "fix"

        var tabContent = $(".tab_content");
        var tabs = $("#menu li");
        var hash = window.location.hash;
     tabContent.not(hash).hide();
        if(hash=="") {
      $('#tab1').fadeIn();
     }
        tabs.find('[href=' + hash + ']').parent().addClass('active');

        tabs.click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            tabContent.hide();
            var activeTab = $(this).find("a").attr("href");

            $(activeTab).fadeIn();
           return false;
        });

    });
</script>

ce code fonctionne très bien quand je visite la "onglets" de la page directement.

cependant, j'ai besoin de lien pour le programme des onglets à partir d'autres pages - pour ce faire, le code de l' window.location.hash montre ensuite l'onglet approprié.

la page n'a pas de "saut" à l'ancre, à cause de "return false".

cet événement est déclenché uniquement sur un événement click cependant. donc, si j'ai la visite de mon "onglets" à partir d'une autre page, le "saut" de l'effet est déclenché. Pour lutter contre cela, je automatiquement défiler vers le haut de la page, mais je préfère ce n'est pas arrivé.

est-il possible de simuler le "return false" lorsque la page se charge, la prévention de l'ancre "saut" de se produire.

j'espère que cela est assez clair.

merci

Answer 1

Votre solution ne fonctionne pas? Je ne suis pas sûr de bien comprendre la question. Avez-vous une page de démonstration? Tu pourrais essayer:

 setTimeout(function() {
  if (location.hash) {
    window.scrollTo(0, 0);
  }
}, 1);
 

Edit: testé et fonctionne sous Firefox, IE & Chrome sous Windows.

Answer 2

Il existe d'autres moyens de suivi de l'onglet que vous êtes sur; peut-être la définition d'un cookie, ou une valeur dans un champ caché, etc etc.

Je dirais que si vous ne voulez pas la page de sauter sur la charge, vous serait mieux d'utiliser un de ces autres options plutôt que de la table de hachage, parce que la principale raison de l'utilisation du hachage, de préférence à eux est de permettre à exactement ce que vous êtes désireux de bloc.

Un autre point: la page ne sera pas sauter si votre hash liens ne correspondent pas les noms des balises dans le document, alors peut-être que si vous souhaitez continuer à utiliser le hash vous pouvez manipuler le contenu, de sorte que les balises sont nommés différemment. Si vous utilisez une constante préfixe, vous serez toujours en mesure d'utiliser le Javascript pour passer ensuite.

Espérons que cela aide.

Answer 3

J'ai utilisé la solution de dave1010, mais c'était un peu sidérant de la mettre dans la fonction $ (). Ready. J'ai donc fait ceci: (pas dans le $ (). Ready)

     if (location.hash) {               // do the test straight away
        window.scrollTo(0, 0);         // execute it straight away
        setTimeout(function() {
            window.scrollTo(0, 0);     // run it a bit later also for browser compatibility
        }, 1);
    }
 

Answer 4

1. Navigateur des sauts <element id="abc" /> si il y a http://site.com/#abc hash de l'adresse et de l'élément avec id="abc" est visible. Alors, vous vous devez masquer l'élément par défaut: <element id="anchor" style="display: none" />. Si il n'est pas visible de l'élément avec l'id=hash à la page, le navigateur ne serait pas sauter.

2. Créer un script qui vérifie le hash de l'url et puis détecte et affiche le prrpopriate élément (qui est caché par défaut).

3. Désactiver par défaut "de hachage comme lien" comportement par la liaison d'un événement onclick d'un lien et de spécifier return false; la suite de l'événement onclick.

Lorsque j'ai mis en place les onglets, j'ai écrit quelque chose comme ça:

    <script>
    $(function () {         
        if (location.hash != "") {
            selectPersonalTab(location.hash);
        }
        else {
            selectPersonalTab("#cards");
        }
    });

    function selectPersonalTab(hash) {
        $("#personal li").removeClass("active");
        $("a[href$=" + hash + "]").closest("li").addClass("active");
        $("#personaldata > div").hide();
        location.hash = hash;
        $(hash).show();
    }

    $("#personal li a").click(function (e) {
        var t = e.target;
        if (t.href.indexOf("#") != -1) {
            var hash = t.href.substr(t.href.indexOf("#"));
            selectPersonalTab(hash);
            return false;
        }
    });
</script>

Answer 5

Je pense que j'ai trouvé un moyen pour les onglets de l'interface utilisateur sans refaire la fonctionnalité. Jusqu'à présent, je n'ai trouvé aucun problème.

     $( ".tabs" ).tabs();
    $( ".tabs" ).not(".noHash").bind("tabsshow", function(event, ui) { 
        window.location.hash = "tab_"+ui.tab.hash.replace(/#/,"");
        return false;
    });

    var selectedTabHash = window.location.hash.replace(/tab_/,"");
    var index = $( ".tabs li a" ).index($(".tabs li a[href='"+selectedTabHash+"']"));
    $( ".tabs" ).not(".noHash").tabs('select', index);
 

Tout dans un événement prêt. Il est précédé de "tab_" pour le hachage mais fonctionne à la fois lorsque vous cliquez dessus et que la page est chargée avec le hachage.