Bruk CSS for å utheve tekst Når en kobling klikkes
Når du klikker på en link på et nettsted, koblingen dirigerer vanligvis nettleseren din til en annen webside. Du kan overstyre denne standardverdien og bruke linker til å utføre andre interessante oppgaver i tillegg. For eksempel kan du ha din søknad høydepunkt viktig webside tekst når en bruker klikker på en kobling. CSS lar deg definere din høydepunkt farge; Javascript gjelder den fargen på teksten.
Bruksanvisning
1 Start din HTML-editor, og åpne en Web-side dokument.
2 Lim inn denne koden i dokumentet "<body>" -delen:
<H1 id = "Overskrift1"> Dette er Overskrift 1 </ h1>
<H1 id = "heading2"> Dette head 2 </ h1>
<a href="javascript:highlightText('heading1')"> Klikk for å fremheve Overskrift 1 </a>
<a href="javascript:highlightText('heading2')"> Klikk for å fremheve Overskrift 2 </a>
Denne koden skaper to overskrifter og to lenker. Den første linken kaller en Javascript-funksjon som heter "highlightText." Den passerer den første overskriften er "ID" value ", Overskrift1" til funksjonen. Den andre koblingen kaller den samme funksjon. Denne linken går ID-en til andre overskriften til funksjonen.
3 Kopier følgende kode, og legge den til dokumentets "<head>" -delen:
<Style type = "text / css">
.highlight {background-color: gul;}
</ Style>
<Script type = "text / javascript" language = "javascript">
funksjon highlightText (id) {
Var textObject = document.getElementById (id);
textObject.className = "highlight";
}
</ Script>
Den "høydepunkt" CSS-klasse innen stilen avsnittet definerer klassen bakgrunnsfarge til gult. Den "highlightText" funksjon, kalt av linkene som er beskrevet tidligere, er endringen CSS "classname" eiendom av koblingen. Siden den classname er "høydepunkt", endringer for koblingen bakgrunnsfargen til gul.
4 Lagre HTML-dokument og lansere den i nettleseren din. Klikk på den første linken. Javascript-koden utfører og anvender CSS høydepunkt styling til teksten i den første overskriften. Klikk den andre linken. Koden fremhever at overskriften også.
Hint
- Du trenger ikke å bruke gul som høydepunkt farge. Endre "gul" til en annen farge navn i dokumentet stil delen. Du kan også føre til at koblingen klikker for å markere andre tekstelementer, som spenner inneholder tekst og paragraphs.Create en link og ha det passere ditt element ID verdi til Javascript-funksjonen.