2010-12-18 10 views
14

Entiendo que es una buena idea no dejar etiquetas de anclaje vacías. En jQuery y otras sintaxis me he dado cuenta de que todo el mundo usa un # para llenar el vacío (<a href='#'>anchor text</a>). ¿Este personaje es mejor o peor que llenarlo con algo más? (por ejemplo, <a href='$'>anchor text</a>). No tengo ninguna razón para querer hacer esto, pero aparentemente no hay razón aparte de la convención para hacerlo de otra manera tampoco. ¿Por qué se usa la convención # en hrefs de etiquetas de anclaje vacías?¿Por qué se usa la # convención en hrefs de etiquetas de anclaje vacías?

Respuesta

16

Esto se debe a que el carácter # en una URL hace referencia a la página local.

Se utiliza para anclas con nombre (o cualquier ID) dentro de una página, por lo que un enlace puede saltar directamente a esa área.

Wikipedia lo llama el fragment identifier y tiene esto que decir:

El identificador de fragmento, si está presente, especifica una parte o una posición dentro del recurso global o documento. Cuando se utiliza con HTTP, generalmente especifica una sección o ubicación dentro de la página, y el navegador puede desplazarse para mostrar esa parte de la página.


Como ejemplo práctico - este enlace a Wikipedia tiene un identificador de fragmento (siempre al final de la URL):

http://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax 

En la página, hay una etiqueta <span id="Syntax" ..., y el navegador salta directamente a él.

16

De esta forma, si el usuario ha desactivado javascript, en realidad, seguir el enlace a "http://misitio.com/#" no tendrá consecuencias negativas.

Por ejemplo, estos enlaces siguen funcionando, ya que # especifica una ubicación en la página actual:

mientras que éstos no lo hacen:

+12

Tenga en cuenta que si utiliza un anclaje como '#!' O algo similar, no tendrá el desagradable efecto secundario de desplazarse a la parte superior de la página si JavaScript está desactivado (o si hay un error en el evento oyente y no puede devolver 'false' ni llamar' preventDefault'). –

+2

¡Nunca supe sobre '#!'. ¿Puedes explicar por qué esto ayuda a no desplazarte a la cima? – Catfish

1

es sobre todo la escuela vieja manera de impedir la acción de clic para activar una recarga de la página.

Si usted no está t usando el atributo href simplemente dejarlo vacío, o incluso mejor si se puede atacar algunos URL alternativa para las personas con discapacidad con JS

+0

Si lo deja vacío, debe agregar algo como 'a {cursor: puntero;}' a su CSS para que se comporte de la misma manera. Además, 'href' es un atributo HTML requerido iirc. –

+1

si el atributo está allí pero solo está vacío (como dije en mi respuesta) lo valida bien y muestra el cursor. – mpenet

3

El enlace indicado por <a href= puntos a otro lugar. Esto podría estar en algún lugar del otro lado del mundo (URL absoluta), o localmente en el mismo dominio/ruta (URL relativa). Dejarlo vacío se refiere al documento mismo.

El # es el carácter utilizado para separar un delimitador del resto de la URL. Los navegadores ni siquiera lo envían al servidor, sino que lo utilizan para desplazarse verticalmente a la posición en la página marcada con este delimitador (usando <a name="foo"></a>).

Básicamente, <a href="#"> indica al navegador que permanezca en la misma página. Por lo general, se usa junto con JavaScript, que se conecta a los eventos onClick, para que el JavaScript haga algo útil, luego return false para evitar que el navegador siga realmente el enlace. Pero si lo hiciera (por ejemplo, si JavaScript está desactivado, o se omite return false), no saldrá del sitio actual, generalmente ni siquiera lo vuelve a cargar.

Así que # se usa no como un carácter aleatorio, sino porque ese es realmente el carácter especificado para indicar un delimitador en un enlace - sucede que en su caso no necesita el enlace real (a otra página) ni el ancla, pero solo un elemento seleccionable.

Cuestiones relacionadas