disign.it | Jquery: applicare automaticamente classi diverse ai link | a digital sign for a best design!
A digital sign for a best design
Javascript 3.959 visualizzazioni

Jquery: applicare automaticamente classi diverse ai link

08/05/2012

Molto spesso le scelte di usabilità e design portano a differenziare gli stili con cui vengon presentati i collegamenti a seconda di dove puntano.

Ad esempio se a un pdf il link apparirà diverso piuttosto che a un file word o un file excel etc etc.

Con Jquery possiamo evitare di applicare manualmente una classe diversa per ogni tipo di link: sarà sufficiente nel nostro foglio stile definire le caratteristiche delle classi necessarie, nominandole secondo le estensioni dei file da individuare e differenziare.

Ad esempio

 

.doc {
    color: red;
    text-decoration: none;
}

.pdf {
    color: blue;
    text-decoration: none;
}

e così via.

 

Dopo aver definito le regole CSS carichiamo l'ultima versione di Jquery, (qui l'articolo),e aggiugngiamo lo script, questo

 

$(document).ready(function() {
$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
       $(this).addClass(C[1]);
   }
});
});  

Naturalmente possiamo aggiungere tutte le estensioni che ci interessano!

← Jquery: centrare orizzontalmente e verticalmente MySql: selezionare un record random →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.