Thêm lớp điều hướng hoạt động dựa trên URL - Thủ thuật CSS

Anonim

Lý tưởng nhất là bạn xuất lớp này từ phía máy chủ, nhưng nếu bạn không thể…

Giả sử bạn có điều hướng như sau:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

Và bạn đang ở URL:

http://yoursite.com/about/team/

Và bạn muốn liên kết Giới thiệu nhận được một lớp “hoạt động” để bạn có thể chỉ ra một cách trực quan đó là điều hướng đang hoạt động.

$(function() ( $('nav a(href^="/' + location.pathname.split("/")(1) + '")').addClass('active'); ));

Về cơ bản, điều đó sẽ khớp với các liên kết trong thuộc tính href của nav ai bắt đầu bằng “/ about” (hoặc bất kỳ thứ gì xảy ra với thư mục phụ).