hachage Changer sans reload dans jQuery

Question

je le code suivant:

$('ul.questions li a').click(function(event) { 
    $('.tab').hide(); 
    $($(this).attr('href')).fadeIn('slow'); 
    event.preventDefault(); 
    window.location.hash = $(this).attr('href'); 
}); 

Cela s'efface tout simplement un div en fonction du moment où vous cliquez mais je veux la balise de hachage URL de la page pour changer lorsque vous cliquez afin que les gens peuvent copier et marque-la. Pour le moment, cela recharge efficacement la page lorsque l'étiquette de hachage est modifiée.

Est-il possible de changer l'étiquette de hachage et de ne pas recharger la page pour éviter l'effet de saut?

Answer 1

Cela fonctionne pour moi

$('ul.questions li a').click(function(event) { 
    event.preventDefault(); 
    $('.tab').hide(); 
    window.location.hash = this.hash; 
    $($(this).attr('href')).fadeIn('slow'); 
}); 

Vérifiez ici http://jsbin.com/edicu pour une démonstration avec le code presque identique

Answer 2

Vous pouvez essayer d'intercepter l'événement onload. Et l'arrêt de la propagation dépend de certains indicateurs.

var changeHash = false; 

$('ul.questions li a').click(function(event) { 
    var $this = $(this) 
    $('.tab').hide(); //you can improve the speed of this selector. 
    $($this.attr('href')).fadeIn('slow'); 
    StopEvent(event); //notice I've changed this 
    changeHash = true; 
    window.location.hash = $this.attr('href'); 
}); 

$(window).onload(function(event){ 
    if (changeHash){ 
     changeHash = false; 
     StopEvent(event); 
    } 
} 

function StopEvent(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
    if ($.browser.msie) { 
     event.originalEvent.keyCode = 0; 
     event.originalEvent.cancelBubble = true; 
     event.originalEvent.returnValue = false; 
    } 
} 

Non testé, donc ne peut pas dire si cela fonctionnerait

Answer 3

Le accepté La réponse n'a pas fonctionné pour moi car ma page a sauté légèrement sur le clic, déconner mon animation de défilement.

J'ai décidé de mettre à jour l'URL entière en utilisant window.history.replaceState plutôt que d'utiliser la méthode window.location.hash. Contournant ainsi l'événement hashChange déclenché par le navigateur.

// Only fire when URL has anchor 
$('a[href*="#"]:not([href="#"])').on('click', function(event) { 

    // Prevent default anchor handling (which causes the page-jumping) 
    event.preventDefault(); 

    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 

     if (target.length) {  
      // Smooth scrolling to anchor 
      $('html, body').animate({ 
       scrollTop: target.offset().top 
      }, 1000); 

      // Update URL 
      window.history.replaceState("", document.title, window.location.href.replace(location.hash, "") + this.hash); 
     } 
    } 
});