Изменить хэш без перезагрузки в JQuery - PullRequest
Новая
       58

Изменить хэш без перезагрузки в JQuery

49 голосов
/ 21 декабря 2009

У меня есть следующий код: 

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

Это просто приводит к потере div в зависимости от того, когда вы нажимаете, но я хочу, чтобы хеш-тег URL-адреса страницы изменялся при нажатии, чтобы люди могли копировать и добавлять его в закладки. В настоящий момент это эффективно перезагружает страницу при изменении хеш-тега.

Можно ли изменить хэш-тег и не перезагружать страницу, чтобы предотвратить эффект прыжка?

Ответы [ 4 ]

77 голосов
/ 21 декабря 2009

Это работает для меня 

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

Проверьте здесь http://jsbin.com/edicu для демонстрации с почти идентичным кодом

4 голосов
/ 21 декабря 2009

Вы можете попробовать перехватить событие onload. И остановка распространения зависит от некоторого флага. 

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;
    }
}

Не проверено, поэтому не могу сказать, будет ли оно работать

0 голосов
/ 03 мая 2018

Вы можете просто присвоить ему новое значение следующим образом, 

window.location.hash
0 голосов
/ 30 марта 2017

Принятый ответ не сработал для меня, так как моя страница слегка подпрыгнула при нажатии, что испортило мою анимацию прокрутки.

Я решил обновить весь URL, используя window.history.replaceState, а не метод window.location.hash. Таким образом обойдя событие hashChange, запущенное браузером. 

// 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);
        }
    }
});
...