Utilizzare i CSS per evidenziare il testo Quando un link viene cliccato

May 28

Utilizzare i CSS per evidenziare il testo Quando un link viene cliccato


Quando si fa clic su un collegamento in un sito web, il link di solito indirizza il browser a un'altra pagina Web. È possibile ignorare questo comportamento predefinito e utilizzare i collegamenti per eseguire altre attività interessanti. Per esempio, si può avere il vostro punto forte applicazione di testo importante pagina Web quando un utente fa clic su un link. CSS permette di definire il vostro colore di evidenziazione; JavaScript applica quel colore al testo.

istruzione

1 Avviare il editor HTML, e aprire qualsiasi documento di una pagina Web.

2 Incolla questo codice nella sezione del documento "<body>":

<H1 id = "Titolo1"> Questo si sta dirigendo 1 </ h1>

<H1 id = "Titolo2"> Questo è Titolo 2 </ h1>

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

<a href="javascript:highlightText('heading2')"> fare clic per evidenziare la rubrica 2 </a>

Questo codice crea due voci e due link. Il primo collegamento chiama una funzione JavaScript denominata "highlightText." Si passa il valore della prima voce "ID", "Titolo 1", per la funzione. Il secondo link chiama la stessa funzione. Questo collegamento passa l'ID del secondo titolo per la funzione.

3 Copiare il codice riportato di seguito, e aggiungerlo alla sezione del documento "<head>":

<Style type = "text / css">

EVIDENZA {background-color: yellow;}

</ Style>

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

Funzione highlightText (id) {

var textobject = document.getElementById (id);

textObject.className = "highlight";

}

</ Script>

Il "clou" classe CSS all'interno della sezione stile imposta il colore di sfondo della classe al giallo. La funzione "highlightText", chiamata dai collegamenti descritti in precedenza, il cambiamento è il CSS "className" proprietà del collegamento. Dal momento che è className "highlight", i cambiamenti di colore di sfondo del collegamento al giallo.

4 Salvare il documento HTML e lanciarlo nel browser. Fare clic sul primo link. Il codice JavaScript viene eseguito e si applica l'evidenziazione stile CSS per il testo nella prima voce. Fare clic sul secondo link. Il codice mette in evidenza che la voce pure.

Consigli e avvertenze

  • Non è necessario usare giallo come colore di evidenziazione. Cambiare "gialla" ad un altro nome del colore nella sezione stile del documento. Si può anche causare collegamento clic per evidenziare altri elementi di testo, come ad esempio campate contenente testo e paragraphs.Create un collegamento e hanno passare il valore identificativo del tuo elemento alla funzione JavaScript.