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:
