# 107: Изграждане на фрагменти, част 4 (JavaScript) - CSS-трикове

Anonim

С дизайна на областта с фрагменти „готово“ - вече можем да преминем към някаква интерактивност (прочетете: JavaScript).

Добавяме супер куцо преобръщане за връзките вляво, само за да имаме нещо, но знаем, че ще променим това по-късно. След това се заехме да всъщност напишем малко JavaScript. При първото посещение на страницата, първата категория (HTML) ще бъде активна. Активно, което означава, че има клас „активен“ в елемента от списъка за HTML. CSS засяга този клас, като му придава стойност на z-index, която визуално издига връзката над сянката и я свързва с плътната цветна линия, разделяща двете колони.

Номерът ще бъде, когато щракнете върху друга категория, за да премахнете активния клас от активната в момента категория и да го приложите към ново кликнатата. Наистина е доста тривиално, само няколко реда jQuery в скрипт, който зареждаме само на тази страница. Също така, списъкът с фрагменти в дясната колона трябва да показва правилния набор от връзки, което отново е просто промяна на класа и проста манипулация на показване / скриване.

Сега остава само стилизиране на страниците за отделни фрагменти.