# 107: Območje delčkov zgradb, 4. del (JavaScript) - CSS-triki

Anonim

Z zasnovo območja odrezkov "končano" - zdaj lahko preidemo v interaktivnost (beri: JavaScript).

Za povezave na levi dodamo super šepavo prevračanje, samo da imamo nekaj, vendar vemo, da bomo to kasneje spremenili. Nato smo se lotili dejanskega pisanja nekaj JavaScript-a. Ob prvem obisku strani bo aktivna prva kategorija (HTML). Aktivno, kar pomeni, da ima na seznamu za element HTML razred »active«. CSS vpliva na ta razred in mu da vrednost z-indeksa, ki vizualno dvigne povezavo nad senco in jo poveže z enobarvno črto, ki ločuje dva stolpca.

Trik bo, ko kliknete drugo kategorijo, da odstranite aktivni razred iz trenutno aktivne kategorije in ga uporabite za novo kliknjeno. Zares je trivialno, le nekaj vrstic jQueryja v skriptu, ki ga naložimo samo na tej strani. Nato mora seznam delčkov v desnem stolpcu prikazati pravi nabor povezav, kar je spet le spreminjanje razreda in preprosta manipulacija pokaži / skrij.

Zdaj je ostalo samo oblikovanje strani za posamezne delčke.