Web Style Sheet
CCS savjeti i trikovi

Dokument https://www.innerviewme.com/007/target.html, je prijevod i može sadržati pogreške. Originalni službeni dokument može se vidjeti na https://www.w3.org/Style/Examples/007/target.html. Pogreške možete prijaviti na moj e-mail matthewjon75@yahoo.com.
Cabins For Sale in Pigeon Forge TN Pigeon Forge Cabins For Sale Homes for Sale in Trinity

(This page uses CSS style sheets)

:Target" izbornikom

Kartica sučelja

Potvrda

Pseudo klasa ":target"

URL obično upućuje na stranicu. Ali ako URL završava sa "#nešto" onda upućuje na određen element na toj stranici. Preglednici obično prokušaju provjeriti da je ciljani element vidljiv i da je, po mogućnosti, na vrhu ekrana.

Sa ":target" izbornikom možete dodati odredjeni stil ciljanom elementu, tako da dobije više pažnje.

Ali možete uraditi i više. Možete skrivati ili pokazati elemente u zavisnosti da li su ciljevi (target) ili ne. Dolje je jedan primjer. On pokazuje mali izbornik sa četiri podatka i svaki je podatak povezan sa nekim tekstom. Ali isprva tekst nije prikazan. Svaki je podatak poveznica za element sa ciljnom oznakom (ID) (#Podatak1, #Podatak2...) i ti su elementi vidljivi samo kada su cilj trenutno važećega URL-a.

Probajte kliknuti na podatke izbornika i također pogledajte lokacijsku traku preglednika da biste vidjeli trenutni URL.

Ovo je element koji odgovara podatku 1. On ne bi trebao biti vidljiv, osim ako ste pratili poveznicu koja izričito cilja na "#item1" (podatak1).

Ako ste skočili na podatak 2 onda bi ovaj element trebao biti vidljiv.

Ovaj element je vidljiv ako ste kliknuli na treći podatak izbornika. Element ima URL kojega možete koristiti i drugdje. Možete ga postaviti u neku drugu stranicu i skočiti izravno na ovaj podatak.

Evo kako to radi. Tu su dva važna dijela, izvorni HTML i svojstvo "display" (prikazati). Prvo HTML dokument. On posjeduje neke poveznice i elemente sa odgovarajućim oznakama (ID):

<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"><!-- by default, show no text -->
</div>

Pravila ovoga stila isprva skrivaju svako P unutar DIV, ali zatim to zanemare za P koje je trenutni cilj:

div.items p {display: none}

div.items p:target {display: block}

To je sve. Gornji primjer nastavlja sa dodavanjem boja, margina, rubova itd. tako da izgleda više kao izbornik. Možete pogledati izvor ove stranice da vidite kako je to urađeno.

Zapravo, mi smo dodali ':not(:target)' kako bi samo CSS3 preglednici skrivali element. S toga su ova pravila bolja:

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

div.items p:target {display: block}

Kartica sučelja

Jednom kada se ovo gore razumije, nije teško poigrati se i stvoriti pravo ... "tabulatorsko" sučelje: skup pravila koja ne samo pokazuju razni sadržaj u zavisnosti od toga koji je gumb pritisnut, već također mijenjaju izgled samoga gumba.

Ovo je jedan primjer. On ne koristi 'display: none', već 'z-index'. Ako želite znati kako ovo radi, samo pogledajte izvor ("view source")…

Pločica 1
Neko može reći da je…
Pločica 2
… 30 redaka CSS doista mnogo i …
Pločica 3
… da bi 2 bila dovoljna, ali …
Polazna
… to radi!

Potvrda

Ova je stranica bazirana na originlanoj ideji Daniel Glazman-a. Pogledajte tumačenje u njegovom blogu od 9. sječnja 2003. i njegovu probu od 13. sječnja.

CSS Valid CSS!

Bert Bos
Dokumnet sastavljen 17 siječnja 2001
Posljednja izmjena $Data: 2009/02/03 14:39:10 $GMT