jquery
  • url
  • append
  • anchor
  • 2011-05-08 21 views 28 likes 
    28

    Quiero que el evento haga clic para anexar/eliminar el nombre del ancla "#on" para agregar a la URL actual sin volver a cargar la página, o use href = '# en "de enlaces, ya que hace mi página de saltaranexar/eliminar el nombre del ancla de la URL actual sin actualizar

    Ej: http://www.example.com/page.html#on para que pueda obtener el detectan los usuarios que provienen de esa url y llamar a la En() función

    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;  
    }); 
    

    Respuesta

    51

    Usted no lo hace Realmente necesito jQuery para eso, puedes obtener/establecer el nombre del ancla usando location.hash. Si lo pones en su función de jQuery listo, se puede hacer algún tipo de acción si se establece en un valor determinado:

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

    Tenga en cuenta que al retirar el hash, el # detrás podría permanecer en la barra de direcciones. Si desea responder a vivir cambios del ancla, puede enlazar una devolución de llamada al evento hashchange:

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

    si desea evitar que su salto de página a la parte superior para despejar el ancla, puede obligar a la hashchange evento para saltar a la posición de desplazamiento anterior. Echa un vistazo a este ejemplo: 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); 
    }); 
    
    +0

    gracias tio, funciona bien ahora, excepto la parte en la que desea establecer la location.hash a nada, como dijiste, mantiene el # al final de la url y hace que mi página salte al principio ... un poco molesto, pero espero encontrar una solución. gracias de nuevo;) – Adrian

    +3

    Agregué una solución al problema de salto. – DarthJDG

    +0

    eres el hombre! gracias;) – Adrian

    14

    si está utilizando jQuery prueba este código

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

    ¡Respuesta genial y simple! ¡Funciona de maravilla! – MatthewLee

    +1

    Tenga en cuenta el soporte de navegador para la API de historial - http://caniuse.com/#search=pushstate (básicamente, IE10 +) – pospi

    Cuestiones relacionadas