Activer l'ancre URL mais ne pas y accéder?

Question

J'ai une page avec deux onglets que je veux être en mesure de passer avec Javascript, mais aussi définir l'ancre (par exemple page.html#tab1) dans l'URL pour bookmarking/liaison.

Par défaut, le contenu de l'onglet est divisé en deux, l'un en dessous de l'autre, et l'étiquette d'ancrage défilera vers la bonne, JS étant désactivé.

Avec JS activé, les classes CSS sont appliquées pour les faire fonctionner comme des onglets. Chaque onglet est lié à chaque ancre, mais lorsque vous cliquez pour changer d'onglet, la page défile vers l'onglet. Si je renvoie false à partir de la fonction onclick, l'URL ne change pas pour inclure l'ancre.

Comment faire pour que l'URL du navigateur passe à page.html#tab1 mais pas à #tab1?

Answer 1

J'ai joué avec cela pendant un moment, parce que je ne vous croyais pas initialement (j'utilise le jQuery history plugin pour obtenir un comportement similaire).

Et je suis perplexe. Je ne pense pas que tu puisses. Ce que vous pouvez faire, comme une solution de contournement, est use javascript to set the hash to something DIFFERENT from what is actually on the page. Et puis utilisez javascript au chargement pour lire le hachage et remplir le contenu correct. I do this on my site. Donc, dans ce scénario, les utilisateurs sans javascript seraient défilés, les utilisateurs avec javascript garderaient la chaîne d'historique, et il devient seulement loufoque lorsque les gens sans envoyer des liens aux personnes avec (ou vice versa).

Answer 2

window.location.hash = 'tab1'; 

peut fonctionner.

Answer 3

Pourriez-vous avoir du Javascript qui a changé les noms des ancres, définir window.location.hash, puis changé les noms d'ancre?

(J'ai confirmé que andynormancx a raison, et la configuration de window.location.hash fait défiler la vue, mais je suis trop fainéant pour tester si la création d'une ancre dans le DOM à window.location.hash défile aussi.)

Answer 4

var Namespace = { 
    var timer, scroll; 
} 

// Onclick 
Namespace.scroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; 
Namespace.timer = setInterval(function() { scrollTo(0, Namespace.scroll) }, 100); 
location.hash = this.href; 
clearInterval(Namespace.timer); 

Answer 5

Un hack rapide:

var thehash = e.target.hash; 
$(thehash).prop('id',thehash.substr(1)+'-noscroll'); 
window.location.hash = e.target.hash; 
$(thehash+'-noscroll').prop('id',thehash.substr(1));  

Cela change l'id de l'élément HTML avant et après avoir modifié le hachage de l'URL. Fonctionne pour moi, mais pourrait aussi bien casser quelque chose. Cela empêche le navigateur de faire défiler un changement de hachage, car il n'y a pas d'élément html avec cet identifiant entre les deux.