Come si disegna uno span per apparire come un collegamento senza usare javascript?

Question

Per il mio sito web avrò bisogno di utilizzare <span> invece di <a> perché sto utilizzando per lo più Ajax e quindi invece di collegamenti devo eventi onclick Ajax come attributi nei miei campate.

Di conseguenza, ho avuto per lo stile manualmente le campate a guardare come i link. Ho usato hover e visitato le classi pseudo a cambiare colore di sfondo e del testo, ma per cambiare il default del mouse ad un dito indice al passaggio del mouse, dovrò usare javascript? O posso farlo usando i CSS?

Inoltre, ho appena realizzato ... non potrei usare il tag <a> in ogni caso invece di <span>, ma solo al posto di un href, includerei un onclick? Dovrebbe funzionare lo stesso, no?

Answer 1

Basta aggiungere cursor:pointer; nel vostro span css.

Answer 2

Usa CSS per visualizzare il cursore come puntatore:

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

http://jsfiddle.net/kkepg/

Answer 3

Si potrebbe utilizzare un ancoraggio. Ma all'interno di javascript che avrebbe dovuto usare event.preventDefault() ma c'è un metodo CSS questo è più piccolo e più facile. Mantenete il vostro arco e utilizzare questo:

span:hover{ 
    cursor:pointer; 
} 

Answer 4

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

Inoltre è possibile utilizzare :hover pseudo-classe per lo stile l'elemento quando aleggiava (è possibile utilizzare qualsiasi stili non solo quelli originariamente utilizzati). Ex.

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

Example

Answer 5

È possibile modificare il cursore su un puntatore specificando la regola cursor: pointer CSS.

È inoltre possibile utilizzare i tag <a> anziché <span>, in quanto possono comportarsi meglio con gli screen reader e altri dispositivi simili. Non è necessario lasciare fuori l'attributo href se si utilizzano i preventDefault() e stopPropagation() funzioni JavaScript nel gestore onClick. In questo modo è possibile mantenere un certo livello di compatibilità con i browser non abilitati a JS.

Answer 6

Option1

Basta utilizzare un collegamento anchor come segue:

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

Option2

non so il motivo per cui si dovrebbe desiderare di utilizzo arco, ma se lo fai è possibile effettuare le seguenti operazioni stili per renderlo simile a un collegamento di ancoraggio.

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 7

Si noti che se il vostro sito è pubblico e si contano sui motori di ricerca la scansione del sito, si perde un sacco, lasciando fuori i collegamenti senza href poiché i ragni non hanno nulla da afferrare durante la scansione della pagina.

È necessario utilizzare un collegamento completa - nel caso in cui il vostro javascript rompe l'utente è ancora in grado di navigare attraverso le pagine:

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

di quanto è possibile disattivare il collegamento con jQuery utilizzando preventDefault() - e completamente indipendente base html e la parte javascript, il che significa che il tuo sito è ancora utilizzabile senza javascript.

Di quello che non c'è bisogno di perdere tempo con arco hover e qualsiasi cosa - ma solo per il gusto di farlo

span:hover { 
cursor:pointer; 
} 

prevede di abilitare il cursore della mano hover sulla durata è passato il mouse.

Answer 8

È possibile utilizzare un evento onClick ma, se non ricordo male, è necessario restituire false per evitare che la pagina salti in giro; qualcosa di simile:

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

o: <a href="#" onClick="return myfunction();"> a condizione che myfunction tornerà falso.

È anche possibile chiamare direttamente un javascript da href ma è necessario lanciare il risultato di annullare al fine di bloccare il browser per cercare di seguire il risultato come un link valido:

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

Anche se ancora vuoi usare la proprietà onClick; sarebbe comunque una buona idea sostituire lo href="#" con href="javascript:void(0)" ...>.

Altre persone hanno menzionato usando lo event.preventDefault() e il stopPropagation(). Non ricordo di aver mai usato uno di questi, ma devo ammettere che sono passati molti anni dall'ultima volta che ho codificato alcuni javascript in un link HTML; quindi dovresti assolutamente investigare l'uso di queste due funzioni.

EDIT: forse l'utilizzo di uno href="javascript:void(0)" potrebbe essere una cattiva idea a volte; vedi http://drupal.org/node/1193068.