Change language
Python.Engineering Wiki JavaScript-tabbladen

JavaScript-tabbladen

__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

CSS-tabbladen zijn echt geweldig om gerelateerde informatie weer te geven op één gemakkelijk te navigeren plek. Ze zien er in feite uit als verdelers met tabbladen die u in een receptendoos of -map zou zien. Voorbeelden van websites die de navigatietabs gebruiken:

Als u naar deze twee sites kijkt, denk dan eens aan de voordelen van het gebruik van een dergelijk onderdeel van de gebruikersinterface op sites. Welke problemen moeten worden opgelost? Wat voor soort informatie zouden de navigatietabbladen zijn, is een goed ontwikkelingswerk?

Wanneer u naar een boomstructuur van de gebruikersinterface moet grijpen die de tekst of informatie in betekenisvolle componenten organiseert en deze op het scherm weergeeft zonder nemen te veel ruimte in beslag, zijn de navigatietabs een verstandige keuze. We zullen dieper ingaan op de navigatietabbladen als we JavaScript, jQuery en/of Bootstrap beginnen te gebruiken, maar er is ook een formeel werk dat we zouden kunnen gebruiken waarvoor alleen pure HTML en CSS nodig zijn. Laten we de configuratie eens bekijken:

Configureer je HTML-code:

Ga je gang en configureer je standaard HTML met een container in de body die zal fungeren als de hoofdcontainer voor het project . Je kunt het een naam geven in het class attribuut, maar ik noem het class = "tabs". Tot nu toe zou uw HTML-code er als volgt uit moeten zien:


In de " tabs" toe en noemen ze elk een tab klasse. Dit staat voor elk van de vier kaarten die we vandaag gaan schrijven. Het bevat onze invoer, tabbladlabels en tabbladinhoud. Laten we voor al deze lege containers maken:

< /html>

In de naam van de inhoudsklasse staat onze inhoud. U kunt elke gewenste inhoud gebruiken, maar het is gebruikelijk om de bijbehorende inhoud op een tabblad te gebruiken

Tijd om CSS te starten:

Als het gaat om het schrijven van CSS, begin dan met de grootste container en werk je weg naar de kleinste container hier is het minimum dat we moeten doen om het voor elkaar te krijgen. werk:

  1. Stel een algemene selector in op een kalibratiebox . border-box
  2. In de hoofdcontainer moet u de display-eigenschap hebben ingesteld op flex en position op relatief. Display: flex maakt het mogelijk kaarten naast elkaar in een rij te plaatsen, en de relatieve positie fungeert daarom als een grens of omheining die de inhoud van de kaart vasthoudt.

Op dit punt kun je ziet wat eruit ziet als vier blokken tekst met een knopradio en wat inhoud, dus we moeten een manier vinden om het geselecteerde blok te tonen en de andere blokken te verbergen.


  1. In de .tab container , we zullen de stijl van het label aanpassen:.
    1. 1px ononderbroken rand in een gewenste kleur
    2. Opvulling: 5px, 10px - voegt ruimte toe rond de labeltekst
    3. 10px border-radius , 10px, 0px, 0px - hierdoor lijkt het label meer op een traditionele kaart.

Als je nu je werk nakijkt, zul je zien dat de labels de ronde keuzerondjes hebben links van hen. Het lijkt dus meer op een traditioneel tabblad, maar om het geselecteerde kenmerk van de knop te behouden, moeten we het ronde deel van het keuzerondje verbergen.

  1. Om de knop daadwerkelijk te selecteren, moeten we gebruik .tab [type = `radio`]. Om het te verbergen, plaatsen we een ongeëvenaarde weergave.

Dus we moeten de daadwerkelijke inhoud benaderen zodat er slechts één tabblad tegelijk wordt weergegeven.

  1. Selecteer de div-inhoud en stel vervolgens de absolute positie in op. Wanneer de absolute positie is ingesteld, kan de div worden ingesteld in de relatieve ouder. Met omhoog, rechts, links en onder kunt u de inhoud overal in de bovenliggende div plaatsen. Stel in dit geval de linker- en rechtereigenschappen in op 0. We willen ook een rand maken en een achtergrondkleur instellen op een niet-transparante kleur.
  1. De z- aanpassen index van het geselecteerde tabblad zal het paneel van dat tabblad naar voren brengen. Selecteer hiervoor de geselecteerde knop en de inhoud ervan. Gebruik hiervoor ons [type = `radio`]: aangevinkt ~ label ~ .content. De "~" tussen elementen in CSS vertelt ons dat we de inhoudsklasse willen die voorkomt na een labelelement dat voorkomt na een geselecteerd keuzerondje.
    1. Om het actieve tabblad weer te geven, stel [type = `radio`]: aangevinkt ~ label in op een andere achtergrondkleur.

      2. Als de gebruiker nu op elk van de tabbladen klikt, moet hij tussen de tabbladen kunnen schakelen zonder de inhoud van de andere panelen te zien . Dit is het minimum dat nodig is voor de navigatietabbladen op het werk Probeer met CSS te spelen om de stijl te veranderen! Een opdracht voor inbedrijfstelling is hierboven - hieronder gecodeerd: