# 107: Obszar fragmentów budynków, część 4 (JavaScript) - CSS-Tricks

Anonim

Po „zakończeniu” projektu obszaru fragmentów - możemy przejść do interaktywności (czytaj: JavaScript).

Dodajemy super lame rollover dla linków po lewej stronie, żebyśmy coś mieli, ale wiemy, że zmienimy to później. Następnie zabraliśmy się za pisanie języka JavaScript. Przy pierwszym wejściu na stronę aktywna będzie pierwsza kategoria (HTML). Aktywny, co oznacza, że ​​ma klasę „aktywną” w elemencie listy dla HTML. CSS wpływa na tę klasę, nadając jej wartość indeksu z, który wizualnie podnosi link nad cieniem i łączy go z ciągłą linią koloru oddzielającą dwie kolumny.

Sztuczka będzie polegać na kliknięciu innej kategorii, aby usunąć aktywną klasę z aktualnie aktywnej kategorii i zastosować ją do nowo klikniętej. To naprawdę trywialne, tylko kilka wierszy jQuery w skrypcie, który ładujemy tylko na tej stronie. Również wtedy lista skrawków w prawej kolumnie musi pokazywać prawidłowy zestaw linków, co znowu jest tylko zmianą klasy i prostą manipulacją pokaż / ukryj.

Teraz pozostaje tylko stylizowanie stron na poszczególne fragmenty.