Với thiết kế cho vùng đoạn trích “đã xong” - giờ chúng ta có thể chuyển sang một số tương tác (đọc: JavaScript).
Chúng tôi thêm một cuộn qua siêu khập khiễng cho các liên kết ở bên trái để chúng tôi có một cái gì đó, nhưng chúng tôi biết chúng tôi sẽ thay đổi điều đó sau. Sau đó, chúng tôi bắt đầu thực sự viết một số JavaScript. Khi truy cập trang lần đầu tiên, danh mục đầu tiên (HTML) sẽ hoạt động. Hoạt động, nghĩa là nó có lớp "hoạt động" trên mục danh sách cho HTML. CSS ảnh hưởng đến lớp đó, tạo cho nó một giá trị z-index, giá trị này tăng trực quan liên kết phía trên bóng và kết nối nó với đường đồng màu ngăn cách hai cột.
Thủ thuật sẽ là khi bạn nhấp vào một danh mục khác, để xóa lớp đang hoạt động trên danh mục hiện đang hoạt động và áp dụng nó cho danh mục mới được nhấp. Nó thực sự khá tầm thường, chỉ là một vài dòng jQuery trong một tập lệnh mà chúng tôi chỉ tải trên trang này. Ngoài ra, danh sách các đoạn mã trong cột bên phải cần hiển thị đúng tập hợp các liên kết, một lần nữa chỉ là một số thay đổi lớp và thao tác hiển thị / ẩn đơn giản.
Tất cả những gì còn lại bây giờ là tạo kiểu cho các trang cho các đoạn trích riêng lẻ.