更改哈希，而无需在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哈希标签改变，以便人们可以复制和书签。 目前，当散列标签发生变化时，这将有效地重新加载页面。

是否有可能改变哈希标签，而不是重新加载页面，以防止跳跃效应？

Answer 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获取几乎相同代码的演示;

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

没有testing，所以不能说，如果它会工作

Answer 3

接受的答案不适合我，因为我的网页点击跳跃，搞乱了我的滚动animation。

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