更改哈希而不在jQuery中重新加载

我有以下代码:

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

这只是根据单击的时间淡入div,但是我希望单击时更改页面URL哈希标记,以便人们可以对其进行复制和添加书签。 目前,这会在哈希标签更改时有效地重新加载页面。

是否可以更改哈希标签而不重新加载页面以防止跳跃效果?

5个解决方案
79 votes

这对我有用

$('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],以获取具有几乎相同代码的演示

jitter answered 2020-01-14T06:46:42Z
4 votes

您可以尝试捕获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;
    }
}

未经测试,所以不能说是否可行

James Wiseman answered 2020-01-14T06:47:06Z
1 votes

您也可以将哈希直接设置为URL。

window.location.hash = "YourHash";

结果:[http:// url#YourHash]

Reza Hassani Mofrad answered 2020-01-14T06:47:30Z
0 votes

接受的答案对我不起作用,因为我的页面在点击时略有跳动,弄乱了我的滚动动画。

我决定使用window.history.replaceState(而不是window.location.hash)更新整个URL。 从而规避了浏览器触发的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);
        }
    }
});
Swen answered 2020-01-14T06:47:55Z
0 votes

您可以简单地为其分配一个新值,如下所示:

window.location.hash
Shahrukh Anwar answered 2020-01-14T06:48:15Z
translate from https://stackoverflow.com:/questions/1939041/change-hash-without-reload-in-jquery