jQuery的：hashchange，防止跳轉到散列

Question

我有一個hashchange功能設置爲顯示/隱藏關於頁面的不同部分沒有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等？

Answer 1

問題是在你的jquery.each塊。

jquery.each塊內的「return true」將不會返回，但會繼續處理下一個項目。 此外，這不會從您的determineContent函數返回，因此滾動的下一個代碼也將被執行，並且determineContent將始終返回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. 

Answer 2

$('a').click(function(event){ 
    event.preventDefault(); 
}); 

preventDefault()應該停止元素具有的任何默認事件。

http://api.jquery.com/event.preventDefault/

Answer 3

試試這個：

jQuery(window).on('hashchange', function(e){ 
    e.preventDefault(); 
    var hashFound = determineContent(); 
    if(hashFound) return false; 
}); 

事件對象將避免的preventDefault()方法，正如它的名字所示，默認行爲要在該事件中執行。既然你希望在散列發生變化時避免正常的行爲，那麼代碼應該這樣做。

Answer 4

$("#id").click(function(event) { 
    event.preventDefault(); 

    //do stuff 
}); 

http://api.jquery.com/event.preventDefault/