Giải thích dài dòng ra là làm nổi bật lên các thẻ a có URL trùng với link hiện tại của trang web, thường ứng dụng để nhấn mạnh các link đang active như trong menu hoặc sidebar của website.
Trong bài viết này mình trình bày cách thêm class “tpactive” cho menu bên sidebar nhé
Ta có đoạn code html của sidebar như sau, nếu URL hiện tại trùng với thẻ a nào thì đổi màu cho nó
|
1 2 3 4 5 6 7 8 |
<ul class="menu"> <li class="menu-item"> <a href="#url1">Menu 1</a> </li> <li class="menu-item"> <a href="#url2">Menu 2</a> </li> </ul> |
Để thêm class active vào ta dùng đoạn javascript sau cộng thêm css lại class tpactive
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .tpactive{ color:red; } </style> <script> jQuery(function($) { var path = window.location.href; $('ul a').each(function() { if (this.href === path) { $(this).addClass('tpactive'); } }); }); </script> |
Chúc các bạn thành công nhé!
Bài viết mới:
- [UX Builder] Tạo slide sản phẩm & bài viết để liên kết trong Flatsome [video]
- Các đơn vị đo độ dài trong Css: px, mm, cm, em, rem …
- 50 bảng màu tuyển chọn dùng tham khảo cho thiết kế web
- Cách tạo danh mục (table of content) cho mô tả danh mục bài viết và sản phẩm
- Các ví dụ về cách dùng WordPress Query
