Tabpanelen

Tabpanelen geven een gebruiker overzicht over een pagina met veel inhoud. Eigenlijk worden alle panelen geladen, maar alleen de geselecteerde wordt getoond.In deze video zie je de opbouw in HTML. De panelen zijn div's met de class 'paneel' en de tab-knopjes zijn linkjes die in een ongeordende lijst zitten.

Alle panelen hebben een id meegekregen en elke knop linkt naar dat paneel doordat de href een waarde # heeft met daaraan de id-naam. Dit moet precies en is te testen.
Er is een stijlblad gekoppeld. daarin is in dit voorbeeld slechts een summiere opmaak. Om te beginnen worden alle panelen verborgen. Een paneel naar keuze hou je zichtbaar door er ook een tweede class 'actief' aan te verbinden.

De jQuery wordt via CDN gekoppeld.

Voor elk van de tabknoppen gaan we het script ontwikkelen. We maken een jQuery-object van de opsomming. Met .each() laten we de opdrachten voor elk van de li-items werken. Daarin maken we een variabele van de knop: hierin wordt de knop opgeslagen en kan later worden aangesproken.

Ook een variabele voor de actieve knop en een voor de link daarbinnen (.find(). Je kunt ook testen of je de variabele goed gevuld hebt. Met de correcte href-waarde kun je jQuery ook het actieve paneel in een variabele opslaan.

Tot slot geven we de knop een event-listener met met .on(). Deze heeft als voordeel dat de koppeling ook werkt als er elementen in DOM worden toegevoegd. Ook kun je met een optionele parameter binnen het element zoeken. De verplichte parameter is hier 'click' en de verplichte parameter functie is hier een anonieme functie.

.on('click', 'a',function() { ... })

Een van de eerste opdrachten is de linkjes te weerhouden van hun standaard-gedrag: naar de koppeling gaan. We doen dat met .preventDefault().

Maak een variabele van de link waarop geklikt is. Daarmee maak je een (object-)variabele van het paneel dat actief gemaakt moet worden.
Nu die variabelen er zijn, kun je van de bestaande actieve paneel die actief-class verwijderen met .removeClass('actief') en hetzelfde geldt voor de actieve knop.

Tot slot stop je in de variabele, die het actieve paneel bevat het beoogde paneel. In dezelfde opdrachtregel kun je met .addClass('actief') hem meteen van een class 'actief' voorzien. Voor de actieve knop geldt natuurlijk hetzelfde. Nu functioneren de tab-panelen al.

Als het script is uitgeschakeld, dan ziet de gebruiker maar 1 paneel en is de rest definitief verborgen. Dat moet worden voorkomen.
Als de niet-actieve panelen nu niet met CSS maar met het script worden verborgen, dan worden ze niet verborgen door een niet-werkend script! Geef de panelen dus geen display:none; met CSS maar met .css('display', 'none'); in jQuery. Omdat ze dan in de DOM deze toevoeging krijgen, werkt het zichtbaar maken niet meer zomaar via de CSS. Voog aan de display: block ook de eigenschap !important toe.