CSS: interfejs z zakładkami

Języki

Niniejszy dokument jest tłumaczeniem, które może zawierać błędy, lub który mógł się zdeaktualizować w stosunku do wersji angielskiej. Wykonane przez: Emil Sierżęga

Zobacz także indeks wszystkich porad.

Na tej stronie:

Selektor :target
Zakładki
Źródła

Pseudo-klasa ':target'

W typowym przypadku URL wskazuje na jakąś stronę. Jednak kiedy URL kończy się na "#cośtam", to wskazuje na konkretny element na tej samej stronie. Przeglądarka stara się żeby element docelowy był widoczny i jeśli to możliwe znajdował się na górze ekranu.

Z selektorem :target' możesz dodać specjalny styl do wskazywanego elementu, tak żeby przykuł większą uwagę.

Możesz jednak uczynić o wiele więcej. Możesz ukryć bądź wyświetlić element bazując na informacji czy jest on wskazywany czy nie. Poniżej znajdziesz odpowiedni przykład. Pokazuje on małe czteroelementowe menu. Każdy składnik wskazuje na jakiś tekst. Ale na początku żaden tekst nie jest wyświetlany. Każdy element zawiera wskazanie (ang. target, czyli #item1, #item2...) i każdy z nich jest widoczny, ale jedynie kiedy wskazuje na aktualny adres URL.

Spróbuj kliknąć na któryś z elementów. Zwróć uwagę na lokalizację jaką wskazuje Ci przeglądarka.

Ten element odpowiada item 1 (pl. pozycja 1). Nie powinien być widoczny, chyba, że bezpośrednio wskazałeś/-aś jako cel "#item1".

Jeśli kliknięto item 2, to ten element powinien stać się widoczny.

Ten element jest widoczny, jeśli kliknięto trzeci link menu. Posiada URL, który możesz także wykorzystać gdzie indziej. Także na innej stronie internetowej, dzięki czemu przejdziesz bezpośrednio do tej pozycji.

Oto jak to działa. Istotne są dwie rzeczy. Źródło HTML oraz atrybut display. Najpierw obejrzyjmy HTML, który zawiera linki i elementy posiadające korespondujące z nimi ID:

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

<div class="items">
  <p id="item1">... item 1...
  <p id="item2">... item 2...
  <p id="item3">...
  <p id="default"><!-- domyślnie nie jest wyświetlany żaden tekst -->
</div>

Reguły najpierw ukrywają wszystkie paragrafy P wewnątrz DIV-a, a następnie nadpisują to ustawienie dla elementów, które są aktualnie wskazywane:

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

To wszystko. W powyższym przykładzie dodano także pewne kolory, marginesy, obramowanie itp., po to żeby całość przypominała menu. Możesz obejrzeć kod źródłowy tej strony, aby zobaczyć co zostało wykonane.

Właściwie, dodaliśmy także :not(:target), aby zapewnić, że wyłącznie przeglądarki obsługujące CSS3 ukryją element. Dlatego lepiej jest zastosować:

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

Zakładki

Kiedy zrozumiesz wcześniejszy przykład, to nie będzie Ci ciężko pobawić się nim trochę, aby uzyskać strukturę przypominającą zakładki. Czyli ustawić style, które nie tylko pokazują inną zawartość na podstawie wciśniętego przycisku, ale także zmieniają sam wygląd tego przycisku.

Poniżej znajduje się przykład. Zamiast stosować display: none wykorzystujemy z-index. Jeśli chcesz się dowiedzieć jak to działa, po prostu obejrzyj kod źródłowy tej strony…

Zakładka 1

Niektórzy mogą się spierać, że...

Zakładka 2

... 30 wierszy CSS-ów to raczej sporo i że...

Zakładka 3

... powinny wystarczyć dwie, ale...

Domyślna

... to działa!