Sử dụng JQuery preventDefault(), nhưng vẫn còn thêm đường dẫn đến URL

Question

tôi đang làm việc trên một trang web nơi nhấp vào liên kết nhất định sẽ trượt xuống một bảng đăng nhập. Tôi đang sử dụng event.preventDefault() để ngăn chặn các trang web từ chuyển hướng cũng như một sự kiện hoạt hình trượt bảng điều khiển xuống. Khi liên kết được nhấp, bảng điều khiển sẽ trượt xuống và url vẫn không thay đổi.

Những gì tôi muốn xảy ra khi liên kết được nhấp là dành cho bảng điều khiển để animate như bình thường, nhưng đối với thuộc tính href của liên kết được hiển thị trong url. Trong trường hợp này nó sẽ là một cái gì đó như thế này: http://domain_name/#login.

Đây là mã tôi đã đã đi ngay bây giờ:

$("#login_link").click(function (e) { 
    e.preventDefault(); 
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear'); 

    window.location.hash = $(this).attr('href'); 
}); 

Mã này cho biết thêm thành công '#login' để url như mong muốn, nhưng nó bỏ qua các hình ảnh động của bảng điều khiển đăng nhập. Khi nhấp vào liên kết, bảng điều khiển sẽ xuất hiện ngay lập tức. Tôi muốn giữ cả hoạt ảnh và hành vi url được cập nhật. Điều này có thể không?

Answer 1

sử dụng dưới mã. chỉ cần gọi hàm băm trong sự kiện đã hoàn thành hoạt ảnh.

$("#login_link").click(function (e) { 
    e.preventDefault(); 
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear', function(){ window.location.hash = $(this).attr('href'); }); 

}); 

Answer 2

Tôi không chắc chắn nhưng bạn có thể tìm kiếm ong cho tính năng này

1> khi một số cơ thể nhấp chuột đăng nhập, thay đổi url để abc.com/#login, và bảng đăng nhập hình ảnh động xảy ra

hoặc

2> khi một số nội dung chỉ nhập abc.com/#login trong url, bạn mong đợi cùng một hành vi (hoạt ảnh của bảng điều khiển đăng nhập).

Hiện tại, bạn đang làm sẽ chỉ hoạt động đối với trường hợp1 và không hoạt động đối với trường hợp 2. Nếu bạn muốn hoạt ảnh (hoặc bất kỳ thứ gì) hoạt động cả khi được nhấp hoặc chỉ cần nhập url. Bạn cần một số cơ chế để phát hiện các thay đổi băm.

Có một plugin nổi tiếng http://benalman.com/projects/jquery-bbq-plugin/

Go và xem plugin này và tìm cách làm việc. Nếu bạn tìm thấy bất cứ điều gì khó khăn để hiểu chúng tôi đang ở đây !!