# 107: Gebouwfragmenten, deel 4 (JavaScript) - CSS-trucs

Anonim

Nu het ontwerp voor het fragmentgebied "klaar" is, kunnen we nu wat interactiviteit aangaan (lees: JavaScript).

We voegen een super flauwe rollover toe voor de links aan de linkerkant, zodat we iets hebben, maar we weten dat we dat later zullen veranderen. Daarna begonnen we met het schrijven van wat JavaScript. Bij het eerste bezoek aan de pagina is de eerste categorie (HTML) actief. Actief, wat betekent dat het de klasse "actief" heeft in het lijstitem voor HTML. CSS beïnvloedt die klasse en geeft deze een z-indexwaarde, waardoor de link visueel boven de schaduw uitkomt en deze verbindt met de effen kleurlijn die de twee kolommen scheidt.

De truc zal zijn wanneer u op een andere categorie klikt, om de actieve klasse uit de momenteel actieve categorie te verwijderen en toe te passen op de nieuw aangeklikte. Het is eigenlijk best triviaal, slechts een paar regels jQuery in een script dat we alleen op deze pagina laden. Ook dan moet de lijst met fragmenten in de rechterkolom de juiste set links tonen, wat wederom slechts een klassewijziging is en eenvoudige manipulatie van tonen / verbergen.

Het enige dat nu overblijft, is het opmaken van de pagina's voor afzonderlijke fragmenten.