# 107: Područje građevinskih isječaka, 4. dio (JavaScript) - CSS-trikovi

Anonim

S "gotovim" dizajnom za područje isječaka - sada možemo prijeći u neku interaktivnost (čitaj: JavaScript).

Dodamo super šepavo prevrtanje za veze na lijevoj strani samo da bismo imali nešto, ali znamo da ćemo to kasnije promijeniti. Tada smo krenuli s zapravo pisanjem nekog JavaScript-a. Nakon prvog posjeta stranici bit će aktivna prva kategorija (HTML). Aktivno, što znači da ima stavku "aktivno" na stavci popisa za HTML. CSS utječe na tu klasu, dajući joj vrijednost z-indeksa, koja vizualno podiže vezu iznad sjene i povezuje je s jednobojnom linijom koja razdvaja dva stupca.

Trik će biti kada kliknete drugu kategoriju kako biste uklonili aktivnu klasu iz trenutno aktivne kategorije i primijenili je na novokliknutu. Zapravo je prilično trivijalno, samo nekoliko redaka jQueryja u skripti koju učitavamo samo na ovoj stranici. Također, popis isječaka u desnom stupcu mora prikazivati ​​točan skup veza, što je opet samo neka promjena klase i jednostavna manipulacija pokazivanjem / skrivanjem.

Sada je preostalo samo oblikovanje stranica za pojedinačne isječke.