在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哈希标记在您单击时更改，以便人们可以复制并将其添加到书签中。此时，当散列标记更改时，这将有效地重新加载页面

---

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

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

没有测试，所以不能说它是否有效这对我有效

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

---

在这里查看一个几乎完全相同代码的演示

当我的页面在点击时轻微跳转，弄乱了我的滚动动画时，接受的答案对我不起作用

我决定使用

window.history.replaceState

更新整个URL，而不是使用

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

---

您只需按如下方式为其指定一个新值

window.location.hash

---

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

window.location.hash = "YourHash";

结果是：

---

首先，您需要将局部变量“event”传递到“StopEvent”中，因为这将使它有一个旋转。我认为这样做不是一个好主意，但是StopEvent函数非常好+1我在此当前页面上运行了以下操作，它完全按照您的要求执行（无需重新加载页面）：$（“a”）。单击（函数（事件）{event.preventDefault（）；window.location.hash=$（this.attr（'href'）；}）。也许在代码运行时，页面还没有加载？检查

$（'ul.questions li a'）中有多少项。

您好，是的，它可以工作，但是当页面滚动时，当哈希链接更改时，它会跳转到div。请检查更改的代码以修复此问题。如果你不想发生这种情况，你只需要切换最后两行。原来的订单是你的，我一直这么做，因为我认为这是你想要的