Change language
Python.Engineering Wiki Karty JavaScript

Karty JavaScript

__main__ Python module | absolute | Bootstrap JavaScript library | code Python module | COM PHP module | Ctype PHP module | dis Python module | Ev PHP module | html Python module | iat | io Python module | JavaScript | jQuery JavaScript library | os Python module | parallel PHP module | pty Python module | Python Development | Python functions | Radius PHP module | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module
Michael Zippo Michael Zippo

Karty CSS są naprawdę świetne do wyświetlania powiązanych informacji w jednym, łatwym w nawigacji miejscu. Zasadniczo wyglądają jak przekładki z zakładkami, które można zobaczyć w pudełku z przepisami lub segregatorze. Przykłady witryn korzystających z kart nawigacji:

Spoglądając na te dwie witryny, zastanów się nad korzyściami płynącymi z zastosowania takiego elementu interfejsu użytkownika w witrynach. Jakie problemy należy rozwiązać? Jaki rodzaj informacji byłyby zakładkami nawigacyjnymi, jest dobrą pracą programistyczną?

Kiedy musisz sięgnąć do drzewa interfejsu użytkownika, które organizuje tekst lub informacje w znaczące komponenty i wyświetla je na ekranie bez zajmując zbyt dużo miejsca, zakładki nawigacyjne to mądry wybór. Porozmawiamy o zakładkach nawigacyjnych bardziej szczegółowo, gdy zaczniemy używać JavaScript, jQuery i / lub Bootstrap, ale jest też formalna praca, której moglibyśmy użyć, która wymaga tylko czystego HTML i CSS. Rzućmy okiem na konfigurację:

Skonfiguruj swój kod HTML:

Śmiało i skonfiguruj swój standardowy kod HTML z kontenerem wewnątrz ciała, który będzie działał jako główny kontener dla projektu . Możesz nazwać go jak chcesz w atrybucie class, ale nazwę go class = "tabs". Jak dotąd Twój kod HTML powinien wyglądać tak:


W " tabs” i wywołamy każdą z klasą tab. To reprezentuje każdą z czterech kart, które będziemy dzisiaj pisać. Będzie zawierał nasz wpis, etykiety zakładek i zawartość zakładek. Stwórzmy puste kontenery dla wszystkich tych rzeczy:

< /html>

Wewnątrz nazwy klasy treści będzie nasza treść. Możesz użyć dowolnej zawartości, ale powszechną praktyką jest używanie powiązanej zawartości na karcie

Czas zacząć CSS:

Jeśli chodzi o pisanie CSS, zacznij od największego kontenera, a przejście do najmniejszego kontenera to minimum, które musimy zrobić, aby to zrobić. praca:

  1. Ustaw ogólny selektor w polu kalibracji . border-box
  2. W głównym kontenerze musisz mieć ustawioną właściwość wyświetlania na flex i pozycję ustawioną na względną. Wyświetlanie: flex umożliwia umieszczanie kart obok siebie w rzędzie, a zatem względne położenie działa jak granica lub ogrodzenie, które utrzymuje zawartość mapy.

W tym momencie możesz zobaczy coś, co wygląda jak cztery bloki tekstu z przyciskiem radio i pewną zawartością, więc musimy znaleźć sposób, aby pokazać wybrany blok i ukryć inne bloki.


  1. W kontener .tab , naprawimy styl etykiety:.
    1. 1px solidne obramowanie w żądanym kolorze
    2. Padding: 5px, 10px - doda przestrzeń wokół tekstu etykiety
    3. 10px border-radius , 10px, 0px, 0px - dzięki temu etykieta będzie wyglądać bardziej jak tradycyjna karta.

Jeśli teraz sprawdzisz swoją pracę, zobaczysz, że etykiety mają okrągłe przyciski radiowe po ich lewej stronie. Wygląda więc bardziej jak tradycyjna zakładka, ale aby nadal zachować wybrany atrybut przycisku, musimy ukryć okrągłą część przycisku opcji.

  1. Aby faktycznie wybrać przycisk, musimy użyj .tab [typ = `radio`]. Aby to ukryć, umieściliśmy niezrównane wyświetlanie.

Więc musimy podejść do rzeczywistej treści, aby wyświetlała tylko jedną kartę na raz.

  1. Wybierz zawartość div, a następnie ustaw pozycję bezwzględną na. Gdy ustawiona jest pozycja bezwzględna, div można ustawić we względnym rodzicu. Używając góra, prawo, lewo i dół, możesz ustawić zawartość w dowolnym miejscu w nadrzędnym div. W takim przypadku ustaw lewą i prawą właściwość na 0. Chcemy również utworzyć obramowanie i ustawić kolor tła na nieprzezroczysty.
  1. Dostosowanie z- indeks wybranej zakładki przeniesie panel tej zakładki na wierzch. W tym celu wybierz wybrany przycisk i jego zawartość. Aby to zrobić, użyj nas [type = `radio`]: check ~ label ~ .content. Znak „~” między elementami w CSS mówi nam, że chcemy klasy treści, która występuje po elemencie label występującym po wybranym przycisku opcji.
    1. Aby wyświetlić aktywną kartę, set [type = `radio`]: zaznaczone ~ etykieta na inny kolor tła.

      2. Teraz, gdy użytkownik kliknie każdą z zakładek, powinien być w stanie przełączać się między nimi bez oglądania zawartości innych paneli Jest to minimum niezbędne do działania zakładek nawigacyjnych Spróbuj pobawić się CSS, aby zmienić styl!Powyżej - poniżej zakodowana praca zlecająca pracę: