Tambahkan Kelas Navigasi Aktif Berdasarkan URL - Trik CSS

Anonim

Idealnya Anda mengeluarkan kelas ini dari sisi server, tetapi jika Anda tidak bisa…

Katakanlah Anda memiliki navigasi seperti ini:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

Dan Anda berada di URL:

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

Dan Anda ingin tautan Tentang mendapatkan kelas "aktif" sehingga Anda dapat menunjukkan secara visual bahwa ini adalah navigasi aktif.

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

Pada dasarnya itu akan cocok dengan tautan di nav yang atribut hrefnya dimulai dengan "/ about" (atau apa pun direktori sekundernya).