Sử dụng hình ảnh để mở rộng hình ảnh cụ thể. Hình ảnh được nhấp vào bên trong cột, được hiển thị trong vùng chứa bên dưới các cột.

Bước 1 : Thêm HTML. Tham khảo code dưới đây :

Bước 2 : Thêm CSS

Ta sẽ tạo ra 4 cột và tạo style cho hình ảnh :

Bước 3 : Để tạo sự tương tác với người dùng, chúng ta thêm JavaScript theo mẫu: 

Note: parentElement là thành phần cha của nút hiện tại

Bước 4 : Chạy chương trình ta sẽ nhận được kết quả trước khi click vào từng hình ảnh :  

Xem kết quả qua đây nhé : Tab Gallery

Nguồn: Devmaster Academy