jquery: hashchange, ngăn chặn nhảy đến băm

Question

Tôi có một hàm băm đổi được thiết lập để hiển thị/ẩn các phần khác nhau của một trang về mà không có 7 trang riêng biệt. Tất cả điều này hoạt động tốt, tuyệt vời, chỉ có một điều nhỏ làm tôi phiền lòng, khi nội dung liên quan được hiển thị trên màn hình, ví dụ: #about01 nếu bạn nhấp vào nút menu một lần nữa trình duyệt nhảy xuống đầu div này không muốn xảy ra.
Dưới đây là jQuery tôi:

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> 

Giống như tôi đã nói, nếu #about01 được hiển thị, và sau đó người dùng nhấp chuột vào #sub-menu-01 một lần nữa, cuộn cửa sổ xuống phía trên cùng của div này , như là hành vi bình thường cho băm trong url. Là một cách để ngăn chặn các hành vi mặc định và không di chuyển đến đầu div này trên nhấp chuột?
Ngoài ra, tôi đang cố gắng tìm hiểu xem có cách nào để hiển thị #about01 khi tải trang của www.website.com/about thay vì phải đặt trong www.website.com/about/#about01 v.v. không?

Answer 1

vấn đề là trong khối jquery.each của bạn.

"trả về true" bên trong khối jquery.each sẽ không trả lại nhưng tiếp tục cho các mục tiếp theo. Ngoài ra, điều này sẽ không trả về từ hàm decideContent của bạn, vì vậy mã tiếp theo cho cuộn cũng sẽ được thực hiện và defineContent sẽ luôn trả về false.

sử dụng cờ, ví dụ:

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() nên dừng mọi sự kiện mặc định mà thành phần có.

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

Answer 3

Hãy thử điều này:

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

Phương pháp preventDefault() của đối tượng sự kiện sẽ tránh được, như tên chương trình của mình, hành vi mặc định được thực hiện trên sự kiện đó. Vì bạn muốn tránh các hành vi bình thường khi thay đổi băm, mã đó nên làm.

Answer 4

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

    //do stuff 
}); 

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