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

Posted 2023-02-22

【中文标题】在jQuery中更改哈希而不重新加载

【英文标题】：Change hash without reload in jQuery

【发布时间】：2010-12-28 16:25:17

【问题描述】：

我有以下代码：

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

这只是根据您单击的时间淡入一个 div，但我希望在您单击时更改页面 URL 哈希标记，以便人们可以复制和添加书签。目前，当哈希标签发生变化时，这会有效地重新加载页面。

是否可以更改hash标签而不重新加载页面以防止跳转效果？

【问题讨论】：

我在当前页面上运行了以下命令，它完全符合您的要求（无需重新加载页面）： $("a").click(function(event)event.preventDefault(); window.location.hash = $(this).attr('href');)。也许在您的代码运行时，页面还没有加载？检查$('ul.questions li a')中有多少项目

【参考方案1】：

这对我有用

$('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 上查看代码几乎相同的演示

【讨论】：

您好，是的，它确实有效，但是当页面滚动时，当哈希链接发生更改时，它会跳转到 div。

检查修复该问题的更改代码。如果您不希望这种情况发生，您只需切换最后两行。最初的订单是你的，我保留了它，因为我认为这就是你想要的

【参考方案2】：

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

未测试，所以不能说它是否有效

【讨论】：

首先，您需要将局部变量“event”传递给“StopEvent”

感谢您的帮助。

我不认为这样做是一个好主意，但是StopEvent 功能真的很好。 +1

【参考方案3】：

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

我决定使用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);
        
    
);

【参考方案4】：

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

window.location.hash = "YourHash";

结果：http://url#YourHash

【参考方案5】：

您可以简单地为它分配一个新值，如下所示，

window.location.hash