Change language
Python.Engineering Wiki Karty JavaScript

Karty JavaScript

absolute | around | find | iat | JavaScript | mean | sin
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ę:

      Shop

      Learn programming in R: courses

      $

      Best Python online courses for 2022

      $

      Best laptop for Fortnite

      $

      Best laptop for Excel

      $

      Best laptop for Solidworks

      $

      Best laptop for Roblox

      $

      Best computer for crypto mining

      $

      Best laptop for Sims 4

      $

      Latest questions

      NUMPYNUMPY

      psycopg2: insert multiple rows with one query

      12 answers

      NUMPYNUMPY

      How to convert Nonetype to int or string?

      12 answers

      NUMPYNUMPY

      How to specify multiple return types using type-hints

      12 answers

      NUMPYNUMPY

      Javascript Error: IPython is not defined in JupyterLab

      12 answers

      All questions

      News

      15/08/2022 Microsoft paid $13.7M to 335 white hat hackers for discovered vulnerabilities 15/08/2022 New GPUs from Intel Xe and Arc will not support DirectX 9 15/08/2022 Meta will start testing automatic end-to-end encryption in Messenger in the coming weeks

      Wiki

      __del__

      Python OpenCV | cv2.putText () method

      __del__

      numpy.arctan2 () in Python

      __del__

      Python | os.path.realpath () method

      around

      Python OpenCV | cv2.circle () method

      cvtcolor

      Python OpenCV cv2.cvtColor () method

      Python functions

      Python - Move item to the end of the list

      Counters

      time.perf_counter () function in Python

      __dict__

      Check if one list is a subset of another in Python

      __del__

      Python os.path.join () method