Nwlapcug.com


Utilizzare CSS per evidenziare testo quando un Link è fatto clic su

Utilizzare CSS per evidenziare testo quando un Link è fatto clic su


Quando si fa clic su un link su un sito Web, il collegamento solitamente indirizza il browser a un'altra pagina Web. Si può eseguire l'override di questo comportamento predefinito e utilizzare collegamenti per eseguire altre attività interessanti pure. Per esempio, potrebbe essere l'applicazione evidenzia il testo importante pagina Web quando un utente fa clic su un link. CSS consente di definire il colore di evidenziazione; JavaScript riferisce quel colore per il testo.

Istruzioni

1

Avviare l'editor di HTML e aprire qualsiasi documento di pagina Web.

2

Incolla questo codice nel documento "< body >" sezione:

< id h1 = "heading1" > si tratta di titolo 1 < / h1 >

< id h1 = "Titolo2" > si tratta di titolo 2 < / h1 >

< un href="javascript:highlightText('heading1')" > fare clic per evidenziare titolo 1 < /a >

< un href="javascript:highlightText('heading2')" > Clicca su evidenziare titolo 2 < /a >

Questo codice crea due voci e due link. Il primo link chiama una funzione JavaScript denominata "highlightText." Valore del primo titolo "ID", "heading1", passa alla funzione. Il secondo link chiama la stessa funzione. Questo link passa l'ID dell'intestazione della seconda alla funzione.

3

Copiare il codice seguente e aggiungerlo alla sezione "< head >" del documento:

< style type = "text/css" >

.Highlight {background-Color: yellow;}

< / stile >

< script type = "text/javascript" language = "javascript" >

Function highlightText(id) () {

var textObject = document.getElementById(id);

textObject.className = "evidenziare";

}

< / script >

La classe CSS "evidenziare" all'interno della sezione stile Imposta colore di sfondo della classe al giallo. La funzione di "highlightText", chiamata dai collegamenti descritti in precedenza, cambiamento di proprietà CSS "className" del collegamento. Poiché tale className è "evidenziare", colore di sfondo del collegamento cambia in giallo.

4

Salvare il documento HTML e lanciarlo nel tuo browser. Fare clic sul primo link. Il codice JavaScript viene eseguito e si applica l'evidenziazione CSS styling al testo nella prima voce. Scegliere il secondo link. Il codice evidenzia questa voce pure.

Consigli & Avvertenze

  • Non devi usare il giallo come il colore di evidenziazione. Modificare "giallo" in nome di un altro colore nella sezione stile del documento. Si possono anche causare tramite mouse evidenziare altri elementi di testo, ad esempio intervalli contenenti testo e paragrafi. Creare un collegamento e farla passare il valore di ID di elemento alla funzione JavaScript.