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:
- 5 phần mềm khôi phục dữ liệu trả phí tốt nhất cho Windows
- Cách chèn video 360 vào web wordpress
- [UX Builder] Tạo slide sản phẩm & bài viết để liên kết trong Flatsome [video]
- 3 đoạn code cần phải có để link chuẩn SEO cho web wordpress
- Hiển thị số lượt xem bài viết trong theme Flatsome không dùng plugin
