Hvordan holde en aktiv link CSS

January 3

For å sikre at besøkende vet på et øyeblikk hvilken side de ser, er det en god idé å lage navigasjonsmenyer på en måte som automatisk holder aktuelle linker aktiv. Dette kan oppnås med enkle CSS.

Bruksanvisning

Oppsett av HTML-dokument

1 Lag en uordnet list.This Menyen inneholder 3 linker:. "Home" "Om" og "tjenester".

<Ul>

<Li> Tjenester </ li>

</ Ul>

2 Legg en ankerkode til hvert listepunkt og link til riktig side.

<Ul>

<Li> <a href="services.html"> Tjenester </a> </ li>

</ Ul>

3 Legg relaterte CSS klasser.

<Ul>

<Li> <a href="services.html" class="services"> Tjenester </a> </ li>

</ Ul>

4 Fest CSS stilark referanse til HTML-dokumentet. Legg til følgende kode i <head> -taggen:

5 For hver side, legge til rette organ klasse. Som et eksempel, for hjemmesiden, legge til:

For om side, legge til:

For tjenester, legge til:

Oppsett CSS

6 Lag en CSS-dokument og gi den navnet "style.css" og sørge for at dette dokumentet lagres på samme nivå som de andre sidene.

7 I "style.css" dokument, legger spesiell styling å målrette kroppen og ankerkoder for spesifikke listeelementer. Her er vi vi er å snu bakgrunnen rødt.

body.home a.home {background-color: red;}

body.about a.about {background-color: red;}

body.services a.services {background-color: red;}

8 Alternativt kombinere alle elementer å kode CSS mer effektivt, samtidig oppnå den samme effekten.

body.home a.home, body.about a.about, body.services a.services {background-color: red;}