Configuración del atributo href en tiempo de ejecución

Question

¿Cuál es la mejor manera de establecer el atributo href de la etiqueta <a> en tiempo de ejecución mediante jQuery?

Además, ¿cómo se obtiene el valor del atributo href de la etiqueta <a> usando jQuery?

Answer 1

Para obtener o establecer un atributo de un elemento HTML, puede usar la función element.attr() en jQuery.

Para obtener el href atributo, utilice el siguiente código:

var a_href = $('selector').attr('href'); 

Para establecer el atributo href , utilice el siguiente código:

$('selector').attr('href','http://example.com'); 

En ambos casos, por favor utilice el selector apropiado Si ha configurado la clase para el elemento de anclaje, use '.class-name' y si ha configurado la identificación para el elemento de anclaje, use '#element-id'.

Answer 2

Establecer el atributo href con

$(selector).attr('href', 'url_goes_here'); 

y leerlo usando

$(selector).attr('href'); 

Donde "selector" es cualquier selector de jQuery válido para el elemento de <a> (".myClass" o "#myId" para nombrar los más simples).

Espero que esto ayude!

Answer 3

En jQuery 1.6 + es mejor utilizar:

$(selector).prop('href',"http://www...") a conjunto el valor, y

$(selector).prop('href') a obtener el valor

En resumen, .prop Obtiene y establece los valores de el objeto DOM y .attr obtiene y establece valores en el HTML. Esto hace que .prop sea un poco más rápido y posiblemente más confiable en algunos contextos.

Answer 4

<style> 
a:hover { 
    cursor:pointer; 
} 
</style> 

<script type="text/javascript" src="lib/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(".link").click(function(){ 
     var href = $(this).attr("href").split("#"); 
     $(".results").text(href[1]); 
    }) 
}) 
</script> 



<a class="link" href="#one">one</a><br /> 
<a class="link" href="#two">two</a><br /> 
<a class="link" href="#three">three</a><br /> 
<a class="link" href="#four">four</a><br /> 
<a class="link" href="#five">five</a> 


<br /><br /> 
<div class="results"></div>