Cu designul pentru zona de fragmente „terminat” - acum putem trece la o anumită interactivitate (citiți: JavaScript).
Adăugăm un rollover super-șchiop pentru linkurile din stânga doar pentru a avea ceva, dar știm că vom schimba asta mai târziu. Apoi ne-am apucat să scriem de fapt JavaScript. După ce vizitați pagina pentru prima dată, prima categorie (HTML) va fi activă. Activ, adică are clasa „activ” pe elementul de listă pentru HTML. CSS afectează acea clasă, oferindu-i o valoare a indexului z, care ridică vizual legătura deasupra umbrei și o conectează la linia de culoare solidă care separă cele două coloane.
Trucul va fi atunci când faceți clic pe o altă categorie, pentru a elimina clasa activă din categoria activă curentă și a o aplica la cea recent făcută clic. Este destul de banal într-adevăr, doar câteva linii de jQuery într-un script pe care îl încărcăm doar pe această pagină. De asemenea, lista de fragmente din coloana din dreapta trebuie să afișeze setul corect de link-uri, care din nou reprezintă doar o schimbare de clasă și o simplă manipulare de afișare / ascundere.
Tot ce a mai rămas acum este să amenajăm paginile pentru fragmente individuale.