web-dev-qa-db-fra.com

ajouter / supprimer le nom de l'ancre de l'URL actuelle sans actualiser

Je souhaite que l'événement sur clic ajoute/supprime le nom de l'ancre "#on" à ajouter à l'URL actuelle sans recharger la page, ou utilise le href = '# on' des liens car cela fait sauter ma page

Par exemple: http://www.example.com/page.html#on afin que je puisse obtenir la détection des utilisateurs provenant de cette URL et appeler le On () fonction

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;    
});
jqueryurlappendanchor
32
Adrian

Vous n'avez pas vraiment besoin de jQuery pour cela, vous pouvez obtenir/définir le nom de l'ancre en utilisant location.hash. Si vous le placez dans votre fonction jQuery ready, vous pouvez effectuer une action s'il est défini sur une certaine valeur:

$(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 = '';
    }
});

Notez que lors de la suppression du hachage, la fin # peut rester dans la barre d'adresse. Si vous souhaitez répondre aux modifications en direct de l'ancre, vous pouvez lier un rappel à l'événement hashchange:

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

Si vous souhaitez empêcher votre page de sauter vers le haut lors de la suppression de l'ancre, vous pouvez lier l'événement hashchange pour revenir à la position de défilement précédente. Découvrez cet exemple: 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);
});
60
DarthJDG

si vous utilisez jquery essayez ce code

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