# 107: Juppide ehitamise osa, 4. osa (JavaScript) - CSS-trikid

Anonim

Juppide ala kujundusega "valmis" saame nüüd liikuda mõningasse interaktiivsusse (loe: JavaScripti).

Lisame vasakpoolsete linkide jaoks ülimõõduka ümberpaigutamise, et meil midagi oleks, kuid teame, et muudame seda hiljem. Seejärel asusime JavaScripti tegelikult kirjutama. Lehe esmakordsel külastamisel on esimene kategooria (HTML) aktiivne. Aktiivne, see tähendab, et HTML-i loendiüksuses on klass „aktiivne“. CSS mõjutab seda klassi, andes sellele z-indeksi väärtuse, mis tõstab visuaalselt lingi varju kohal ja ühendab selle kahe veeru eraldava ühevärvilise joonega.

Trikk saab olema siis, kui klõpsate mõnel muul kategoorial, et eemaldada aktiivne klass aktiivsest kategooriast ja rakendada see äsjaklõpsatud kategooriasse. See on tegelikult üsna tühine, vaid paar rida jQuery skripti, mille laadime ainult sellele lehele. Ka siis peab parempoolses veerus olevate juppide loend näitama õiget linkide komplekti, mis jällegi on vaid mõni klassi muutev ja lihtne näita / peida manipuleerimine.

Nüüd on jäänud ainult üksikute juppide jaoks lehtede kujundamine.