web-dev-qa-db-fra.com

Changer le hachage sans recharger dans jQuery

J'ai 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 a simplement pour effet de fondre une div en fonction du moment où vous cliquez, mais je souhaite que la balise de hachage de l'URL de la page soit modifiée lorsque vous cliquez dessus afin que les utilisateurs puissent la copier et la marquer d'un signet. Pour le moment, la page est rechargée lorsque la balise de hachage est modifiée.

Est-il possible de changer la balise de hachage et de ne pas recharger la page pour empêcher l'effet de saut?

jqueryhashreloadfragment-identifierwindow.location
49
daveredfern

Ça marche 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 un code presque identique

75
jitter

Vous pouvez essayer de saisir l'événement onload. Et arrêter la propagation dépend d'un drapeau.

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

4
James Wiseman

Vous pouvez simplement lui attribuer une nouvelle valeur comme suit,

window.location.hash
0
Shahrukh Anwar

La réponse acceptée n'a pas fonctionné pour moi car ma page a légèrement sauté sur un clic, ce qui a gâché mon animation de défilement.

J'ai décidé de mettre à jour l'intégralité de l'URL en utilisant window.history.replaceState plutôt qu'en utilisant 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);
        }
    }
});
0
Swen