style - title html

¿Cómo puedo diseñar un espacio para que parezca un enlace sin usar javascript?

Question

Para mi sitio web necesitaré usar <span> lugar de <a> porque estoy utilizando principalmente ajax y, por lo tanto, en lugar de enlaces, tengo eventos de ajax en los clics como atributos en mis tramos.

Como resultado, he tenido que diseñar manualmente los tramos para que parezcan enlaces. He usado hover y he visitado pseudo clases para cambiar el color del fondo y del texto, pero para cambiar el valor predeterminado del mouse a un puntero con el puntero del mouse, ¿necesitaré usar javascript? O puedo hacer eso usando css?

Además, me acabo de dar cuenta ... no podría usar la etiqueta <a> todos modos en lugar de <span> , pero en lugar de un href, ¿incluiría un onclick? Debería funcionar igual, no?

Answer 1

Opción 1

Simplemente use un enlace de anchor siguiente manera:

<a href="#" onclick="someFunction();"> Link </a>

Opcion 2

No sé por qué querría usar span, pero si lo hace, puede hacer los siguientes estilos para que se vea similar a un enlace de anclaje.

span {
    color: #000000; /* Change this with links color*/
    cursor: pointer;
    text-decoration: underline;
}

span:hover {
    color: #444444; /* Change the value to with anchors hover color*/
}

Answer 2

Podrías usar un ancla. Pero dentro de javascript tendrías que usar event.preventDefault() Pero hay un método CSS que es más pequeño y más fácil. Mantén tu alcance y usa esto:

span:hover{
    cursor:pointer;
}

Answer 3

Puede cambiar el cursor a un puntero especificando la regla del cursor: pointer CSS.

También puede usar etiquetas <a> lugar de <span> , de hecho, pueden comportarse mejor con lectores de pantalla y otros dispositivos similares. No es necesario omitir el atributo href si utiliza las funciones de JavaScript preventDefault() y stopPropagation() en el controlador onClick . De esta manera, puede mantener cierto nivel de compatibilidad con versiones anteriores con navegadores que no estén habilitados para JS.

Answer 4

Puedes usar un evento onClick, pero si recuerdo correctamente, debes devolver false para evitar que tu página salte; algo como:

<a href="#" onClick="myfunction();return false;">

o: <a href="#" onClick="return myfunction();"> siempre que myfunction devuelva falso.

También puede llamar directamente a un javascript desde href, pero debe anular el resultado para bloquear el navegador e intentar seguir el resultado como un enlace válido:

<a href="javascript:void(myFunction())">

Incluso si todavía desea utilizar la propiedad onClick; aún sería una buena idea reemplazar href="#" con href="javascript:void(0)" ...> .

Otras personas han mencionado el uso de event.preventDefault() y stopPropagation() . No recuerdo haber usado nunca uno de estos, pero debo admitir que han pasado muchos años desde la última vez que codifiqué algunos javascript en un enlace HTML; por lo que definitivamente debe investigar el uso de estas dos funciones.

EDITAR: tal vez usar un href="javascript:void(0)" podría ser una mala idea a veces; ver http://drupal.org/node/1193068 .

Answer 5

Sólo tiene que añadir el cursor:pointer; en tu span css.

Answer 6

Tenga en cuenta que si su sitio web es público y está contando con los motores de búsqueda para rastrear su sitio, pierde mucho al omitir enlaces sin href ya que las arañas no tienen nada que agarrar mientras rastrean su página.

Debería usar un enlace completo; en caso de que su javascript se rompa, el usuario aún puede navegar por las páginas:

<a href="http://www.example.com">Link</a>

luego puede desactivar el enlace con jquery usando preventDefault() , y separó totalmente el html base y la parte de javascript, lo que significa que su sitio aún se puede usar sin javascript.

De lo que no tiene que preocuparse por el desplazamiento del tramo y nada, sino por el simple hecho de hacerlo.

span:hover {
cursor:pointer;
}

habilitará el cursor de la mano flotante en el intervalo desplegado.

Answer 7

Usa CSS para mostrar el cursor como un puntero:

<span style="cursor: pointer;">Pseudolink</span>

http://jsfiddle.net/kkepg/

Answer 8

span {
     cursor:pointer;
     color:blue;
     text-decoration:underline;
}

Además, puede usar :hover pseudo clase para estilizar el elemento cuando se desplace (puede usar cualquier estilo, no solo los que se usaron originalmente). Ex.

span:hover {
     text-decoration:none;
     text-shadow: 1px 1px 1px #555;
}

Example