我设置了一个hashchange函数，用于显示/隐藏about页面的不同部分，而不需要7个单独的页面。这一切都很好，事实上，只有一件小事困扰着我，当相关内容显示在屏幕上时，例如：#about01如果你再次点击菜单按钮，浏览器会跳到这个div的顶部，我不希望发生这种情况
这是我的jQuery:
jQuery(document).ready(function(){
jQuery(window).on('hashchange', function(){
var hashFound = determineContent();
if(hashFound) return false;
});
function determineContent(){
var hash = window.location.hash;
jQuery('.about').hide();
jQuery('.sub-menu').each(function(){
if (jQuery(this).attr('hook') === hash.replace('#about', '')) {
jQuery('#about'+jQuery(this).attr('hook')).fadeIn();
return true;
}
});
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
}
determineContent();
});
HTML:
<div id="sub-menu">
<li id="sub-menu-01" class="sub-menu" hook="01"><a href="#about01">TEST</a></li>
<li id="sub-menu-02" class="sub-menu" hook="02"><a href="#about02">TEST</a></li>
<li id="sub-menu-03" class="sub-menu" hook="03"><a href="#about03">TEST</a></li>
<li id="sub-menu-04" class="sub-menu" hook="04"><a href="#about04">TEST</a></li>
<li id="sub-menu-05" class="sub-menu" hook="05"><a href="#about05">TEST</a></li>
<li id="sub-menu-06" class="sub-menu" hook="06"><a href="#about06">TEST</a></li>
<li id="sub-menu-07" class="sub-menu" hook="07"><a href="#about07">TEST</a></li>
</div>
<div id="about01" class="about">CONTENT HERE
</div>
<div id="about02" class="about">CONTENT HERE
</div>
<div id="about03" class="about">CONTENT HERE
</div>
<div id="about04" class="about">CONTENT HERE
</div>
<div id="about05" class="about">CONTENT HERE
</div>
<div id="about06" class="about">CONTENT HERE
</div>
<div id="about07" class="about">CONTENT HERE
</div>
就像我说的，如果显示了#about01，然后用户再次单击#sub-menu-01，则窗口向下滚动到此div的顶部，这是url中哈希的正常行为。这是一种防止默认行为的方法吗？点击时不滚动到这个div的顶部
此外，我想知道是否有一种方法可以在www.website.com/about的页面加载上显示#about01，而不必放入www.website.com/about/#about01等？
问题出现在jquery.each块中。
jquery.each块中的"return true"不会返回，但会继续用于下一项。此外，这不会从您的determineContent函数返回，因此也将执行滚动的下一个代码，并且determineContext将始终返回false。
使用标志，例如
var found = false;
JQuery.each(function(){
if(found) return;
//if your condition is true then found = true
})
if(found) return true;
//else continue the next line.
$("#id").click(function(event) {
event.preventDefault();
//do stuff
});
http://api.jquery.com/event.preventDefault/
$('a').click(function(event){
event.preventDefault();
});
preventDefault()应该停止元素具有的任何默认事件。
http://api.jquery.com/event.preventDefault/
试试这个：
jQuery(window).on('hashchange', function(e){
e.preventDefault();
var hashFound = determineContent();
if(hashFound) return false;
});
正如其名称所示，事件对象的preventDefault()方法将避免在该事件上执行默认行为。由于您希望避免哈希更改时的正常行为，因此代码应该这样做。