Href senza link e azione

Obiettivo: creare un link che non abbia collegamenti ad altre pagine ma che esegua un evento, tipo l’evento onclick. Senza il tag <a href=””> non comparirebbe la classica manina che indica un azione al clic dell’utente.

Problematiche: la soluzione standard è il cancelletto:

<a href="#">Link</a>

Così facendo però la pagina salirà fino in cima, causando scompiglio a chi magari voleva far comparire un div, o un popup o i più usati lighbox, senza perdere il segno.

Soluzione: al posto dell’asterisco useremo:

javascript:void(0)

ottenendo così:

<a href="javascript:void(0)">Link</a>

Tutto qui.

Personalmente lo uso quando devo, ad esempio, mostrare un fascicolo dove sono visualizzati solo i nomi dei pazienti. Con jQuery nascondo tutti i div contenenti le schede e poi, cliccando su un nome a caso, viene mostrata la relativa scheda che compare con uno slide. Se cliccando sul nome ci fosse stato l’asterisco, la pagina sarebbe tornata in cima e avrei perso il punto dove ho aperto la scheda. Con questo sistema la manina viene mostrata e cliccando sul link viene aperta la scheda relativa al paziente senza azioni.

Annunci

, , , , , , ,

  1. #1 di Antonio il 14/06/2013 - 17:28

    Vedo molti errori in questo articolo:

    1. Quella che viene definita come soluzione standard utilizza un CANCELLETTO e non un ASTERISCO;
    2. Se si vuole associare un evento onclick ad un elemento lo si può fare utilizzando un qualunque altro tag ad esempio il comune DIV;
    3. Se si vuole associare l’immagine della manina al puntatore del mouse lo si può fare su qualunque tipo di elemento, basta aggiungere nel css una classe che utilizza cursor:pointer;
    4. Per assegnare una funzione nulla in un parametro href non è necessario usare void(0) ma è sufficiente definire javascript:;

    Apprezzo lo spirito dell’articolo che vuole essere di aiuto, ma credo che se si vogliano dare delle indicazioni è fondamentale essere precisi e non approssimativi.
    Saluti,
    Antonio

    • #2 di portapipe il 15/06/2013 - 06:53

      Ho approvato questo commento perché mi sembra giusto accogliere sia elogi che critiche.
      Grazie per il cancelletto, errore di distrazione.
      Per il resto… come ho mostrato io funziona, no? Quindi non capisco dove siano questi errori. Entrambe sono ottime come soluzioni. Personalmente uso molto più i div di ogni altra cosa ma non tutti lo conoscono bene come dovrebbero. C’è chi usa ancora tabelle per tutto, ignorando a pié pari i css, e il fatto che tu conosca un metodo differente non vuol dire che il mio sia sbagliato, è semplicemente diverso.

      Il blog vuole essere uno strumento per chi non ha voglia di leggere cose tecniche e gli serve una soluzione rapida, soprattutto chi non ha nozioni di html, css e/o javascript.
      La mia soluzione vuole essere proprio questo: basica. Se si vuole qualcosa di più tecnico, come forse speravi di trovare tu, allora questo articolo (e blog) è chiaramente fuori luogo ma, come detto, deve essere il più semplice possibile.

      Grazie del tuo intervento 🙂

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: