CSS: O interfata cu tab-uri

Pseudo clasa ':target'

Un URL in mod normal arata spre o pagina. Dar cand URL-ul se termina in "#something" el tinteste un element specific in acea pagina. Browserele in mod tipic incearca sa se asigure ca elementul tinta este vizibil si daca este posibil sa fie in partea de sus a ecranului.

Cu selectorul ':target', puteti adauga un stil specific la elementul tinta, astfel ca primeste mai multa atentie.

Dar puteti face mai mult. Puteti ascunde sau afisa elemente bazate pe faptul daca ele sunt tinta sau nu. Mai jos este un exemplu. Se arata un mic meniu cu patru elemente si fiecare element este legat la un text. Dar la inceput nici un text nu este afisat. Fiecare element este un link la un element cu un ID tinta (#item1, #item2...) si acele elemente sunt vizibile numai cand ele sunt tinta URL-ului curent.

Incercati sa dati clic pe elementele meniurilor si deasemenea priviti la bara de locatie a browserului pentru a vedea URL-ul curent.

Acesta este elementul care corespunde lui item 1. Ar trebui sa nu fie vizibil, in afara de cazul in care ati urmat un link care a tintit in mod explicit "#item1".

Daca ati sarit la item 2, atunci acest element ar trebui sa fie vizibil.

Acest element este vizibil daca ati dat clic pe al treilea element al meniului. Elementul are un URL, pe care il puteti utiliza si in alta parte la fel de bine. Il puteti pune intr-o alta pagina web si sari direct la acest element.

Iata cum functioneaza. Exista doua parti importante, sursa HTML si proprietatea 'display'. Mai intai documentul HTML. Are cateva linkuri si elemente cu ID-urile corespunzatoare:

<p>
  <a href="#item1">item 1</a>
  <a href="#item2">item 2</a>
  <a href="#item3">item 3</a>
  <a href="#default">clear</a>

<div class="items">
  <p id="item1">... item 1...
  <p id="item2">... item 2...
  <p id="item3">...
  <p id="default"><!-- implicit, nu afiseaza nici un text -->
</div>

Regulile de stil mai intai ascund toate P-urile din interiorul DIV-ului, dar apoi suprascrie aceasta pentru acel P care este tinta curenta:

div.items p {display: none}
div.items p:target {display: block}

Asta-i tot. Exemplul de mai sus merge mai departe in adaugarea anumitor culori, margini, granite, etc., astfel ca arata mai mult ca un meniu. Puteti cerceta sursa acestei pagini pentru a vede acum se face asta.

De fapt, noi am adaugat ':not(:target)', pentru a asigura ca numai browserele CSS3 vor ascunde elementul. Asa ca reguli mai bune ar fi acestea:

div.items p:not(:target) {display: none}
div.items p:target {display: block}

O interfata cu tab-uri

Odata ce intelegeti cele de mai sus, nu este dificil sa exersati si sa creati o interfata reala cu tab-uri: un set de reguli de stil care nu numai ca arata continut diferit bazat pe care buton a fost apasat, dar deasemenea modifica aparenta butonului insusi.

Iata un exemplu. El nu utilizeaza 'display: none', ci 'z-index'. Daca vreti sa stiti cum functioneaza, selectati "view source" (vedeti sursa)…

Tab 1

Cineva ar putea foarte bine sa argumenteze, ca...

Tab 2

... 30 linii de CSS e mai degraba mult si...

Tab 3

... ca 2 ar fi trebuit sa fie destul, dar...

Default

... functioneaza!