Tambah Kelas Navigasi Aktif Berdasarkan URL - Trik CSS

Anonim

Sebaik-baiknya anda mengeluarkan kelas ini dari sisi pelayan, tetapi jika anda tidak dapat…

Katakan anda mempunyai navigasi seperti ini:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

Dan anda berada di URL:

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

Dan anda mahu pautan Perihal mendapat kelas "aktif" sehingga anda dapat menunjukkan secara visual bahawa navigasi aktif.

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

Pada dasarnya ia akan sesuai dengan pautan di atribut nav yang href bermula dengan “/ about” (atau apa sahaja direktori sekunder yang berlaku).