№ 107: Область побудови фрагментів, частина 4 (JavaScript) - CSS-хитрощі

Anonim

Коли дизайн для області фрагментів «готовий» - тепер ми можемо перейти до певної інтерактивності (читайте: JavaScript).

Ми додаємо супер кульгаве перекидання для посилань ліворуч лише для того, щоб у нас було щось, але ми знаємо, що змінимо це пізніше. Потім ми взялися за те, щоб фактично написати трохи JavaScript. Після першого відвідування сторінки буде активна перша категорія (HTML). Активний, тобто він має клас "активний" у елементі списку для HTML. CSS впливає на цей клас, надаючи йому значення z-індексу, яке візуально піднімає посилання над тінню і приєднує його до суцільної кольорової лінії, що розділяє два стовпці.

Фокус буде, коли ви натискаєте іншу категорію, щоб видалити активний клас із поточної активної категорії та застосувати його до нещодавно натиснутої. Насправді це досить тривіально, лише кілька рядків jQuery у сценарії, який ми завантажуємо лише на цій сторінці. Крім того, у списку фрагментів у правій колонці потрібно вказати правильний набір посилань, що знову ж таки є лише зміною класу та простою маніпуляцією з показу / приховування.

Зараз залишилось лише стилізувати сторінки для окремих фрагментів.