Giả sử bạn muốn Menu của bạn trượt dọc theo màn hình nhưng dừng cuộn tới ID/class nào đó thì ta sẽ ứng dụng như sau.

Thủ thuật dưới đây sẽ thêm class nhưng sẽ remove (xóa class) khi cuộn tới class nào đó tính từ đầu màn hình

Một tính năng Javascript quen thuộc mà mình đã chia sẻ và hướng dẫn lần trước. Nhưng trong lần này có thêm phần click thêm 1 lần nữa để remove (Xóa) class/id vừa thêm.

Click to Add class, Click again remove class thường ứng dụng để làm Menu Mobile (Menu trên di động). Click một lần để show các Sub Menu (Menu con cấp 2, 3) và click vấn nữa để ẩn đi.

Cách ứng dụng:

1. Xem web với chế độ di động (Responsive <600px)

1. Truy cập https://www.tinhdauonline.com.vn.
2. Chuột phải -> Kiểm tra phần tử
3. Xem website trên Giao diện mobile với kích thước Resposive width từ 600px trở xuống.

Xem cách hoạt động code trên giao diện Responsive

Bài viết này nằm trong Serie Javascript Blogger.

Trong các bài viết trước đây mình đã chia sẻ một số javascript

• Click change Text (Click để thay đổi nội dung)
• Scroll add class (Cuộn trang để thêm class)

Hôm nay mình hướng dẫn một Javascript mới là click thể thêm class/id và cách mình ứng dụng nó vào lập trình web.

Cách ứng dụng Click to add class

• DEMO trên trang web: https://www.tinhdauonline.com.vn

Click to add class áp dụng cho trang web tinhdauonline.com.vn

Để mô tả cách hoạt động Javascript Scroll to add class hoạt động như sau. 

Khi bạn cuộn web đến một cao nhất định được tính bằng px. Khi đó javascript sẽ tự thêm thuộc tính class='tên class'

Do vậy bạn chỉ cần viết thêm css cho class này thì sẽ thực hiện được một chức năng nào đó.

Javascript Scroll to add class

Khi click chuột vào 1 id hoặc class chứa text thì text (chữ) sẽ chuyển thành text khác.
Thủ thuật click change text này được mình sử dụng cho trang web https://www.tinhdauonline.com.vn và chỉ sử dụng một đoạn javascript nhỏ!

Được minh họa như sau (Click change text)

Hiện text ĐÃ THÊM +1 để xác nhận thao tác click thành công!

Việc tạo banner quảng cáo để phục vụ các hoạt động quảng cáo tìm kiếm lợi nhuận là điều mà nhiều Webmaster/Blogger mong muốn.

Và dưới thủ thuật sau đây sẽ giúp bạn tạo 1 banner đồng thời có nút button (x) để người dùng có thể tắt để ngừng xem quảng cáo để tránh ảnh hưởng đến trãi nghiệm trên website/blog chúng ta.

Qua thủ thuật tạo banner quảng cáo này chúng ta cũng sẽ học về 1 chút javascript rất hữu ích.

Banner được trên menu và nó button tắt (x)