nối/xóa tên neo khỏi url hiện tại mà không cần làm mới

Question

Tôi muốn rằng trên sự kiện nhấp để thêm/xóa tên neo "#on" được thêm vào url hiện tại mà không cần tải lại trang hoặc sử dụng href = '# trên 'từ các liên kết bởi vì nó làm cho trang web của tôi nhảy

Ví dụ: http://www.example.com/page.html#on vì vậy tôi có thể nhận được phát hiện người sử dụng đến từ url và gọi On() chức năng

function On() 
{ 
    //append to current url the anchor "#on"     
} 

function Off() 
{ 
    //remove from the current url the anchor "#on"      
} 

$('.on').live('click', function() { 
    On(); 
    return false;  
}); 


$('.off').live('click', function() { 
    Off(); 
    return false;  
}); 

Answer 1

Bạn không thực sự cần jQuery cho điều đó, bạn có thể lấy/đặt tên neo bằng cách sử dụng location.hash. Nếu bạn đặt nó trong chức năng sẵn sàng jQuery, bạn có thể làm một số hành động nếu nó được đặt vào một giá trị nhất định:

$(function(){ 
    // Remove the # from the hash, as different browsers may or may not include it 
    var hash = location.hash.replace('#',''); 

    if(hash != ''){ 
     // Show the hash if it's set 
     alert(hash); 

     // Clear the hash in the URL 
     location.hash = ''; 
    } 
}); 

Lưu ý rằng khi tháo băm, các dấu # có thể ở lại trong thanh địa chỉ. Nếu bạn muốn trả lời để sống thay đổi của neo, bạn có thể gắn một callback để sự kiện hashchange:

$(document).bind("hashchange", function(){ 
    // Anchor has changed. 
}); 

Nếu bạn muốn ngăn chặn nhảy trang của bạn lên hàng đầu khi làm neo, bạn có thể ràng buộc hashchange sự kiện để quay lại vị trí cuộn trước đó. Kiểm tra ví dụ này: http://jsfiddle.net/yVf7V/

var lastPos = 0; 

$('#on').click(function(){ 
    location.hash = 'blah'; 
}); 

$('#off').click(function(){ 
    lastPos = $(window).scrollTop(); 
    location.hash = ''; 
}); 

$(window).bind('hashchange',function(event){ 
    var hash = location.hash.replace('#',''); 
    if(hash == '') $(window).scrollTop(lastPos); 
    alert(hash); 
}); 

Answer 2

nếu bạn đang sử dụng jquery thử mã này

$("a[href^=#]").on("click", function(e) { 
    e.preventDefault(); 
    history.pushState({}, "", this.href); 
});