Menetapkan item menu aktif berdasarkan URL semasa dengan jQuery

Masalah ini muncul berulang kali ketika membina laman web: Bagaimana cara menentukan lokasi pengguna sekarang supaya saya dapat menyerlahkan bahagian aktif di menu navigasi? Ini adalah keperluan asas tetapi penyelesaiannya nampaknya diciptakan semula pada setiap binaan baru.

Terdapat dua laluan utama yang boleh anda ambil semasa menyelesaikan masalah ini secara dinamik, di sisi pelayan dan di sisi pelanggan. Menyelesaikan perkara ini di sisi pelayan adalah baik kerana anda akan mempunyai pegangan yang lebih baik di halaman yang diminta, tetapi tidak selalu praktikal. Dengan sedikit perancangan, cukup mudah untuk menyelesaikannya di pihak pelanggan menggunakan JavaScript (dan jQuery pilihan).

Anggaplah anda mempunyai menu navigasi asas di tajuk anda dan anda mahu menukar warna latar belakang halaman semasa anda berada.

Sebaik-baiknya, apabila anda mengklik Tour dan anda dibawa ke halaman Tour, anda ingin menu tersebut menggambarkan lokasi semasa anda.

Untuk melakukan ini menggunakan jQuery, kita akan membandingkan atribut href setiap pautan menu ke URL penyemak imbas semasa dan cuba mencari padanan. Sekiranya perlawanan dijumpai, kami akan menetapkan elemen itu menjadi aktif dengan menambahkan kelas ke

  • unsur.

    Hasil bersih dari contoh yang sangat asas ini kelihatan seperti ini

    Pada setiap halaman memuatkan skrip ini melaksanakan dan membandingkan href setiap menu pautan ke URL halaman semasa bermula setelah nama domain dan meneruskan ke hadapan untuk seberapa banyak watak yang ada di href (mirip dengan fungsi beginWith ()). Ini membolehkan setiap sub-halaman "Tour" juga menandakan Tour sebagai bahagian aktif misalnya, /tour/section2.html. Apabila perlawanan dijumpai, elemen induk - dalam kes ini a

  • - mempunyai kelas "aktif" yang ditambahkan ke dalamnya.

    Penyelesaian ini boleh didapati di jsFiddle untuk digunakan dan juga disertakan di bawah. Perkara utama yang perlu anda ubah untuk keperluan anda sendiri adalah pemilih ".nav" pada baris 9 JavaScript. Ini harus diubah suai untuk memilih elemen navigasi yang ingin anda proses.

    Perhatikan bahawa contoh jsFiddle tidak akan berfungsi kerana anda sebenarnya tidak dapat mengubah URL di tetingkap hasilnya, tetapi anda dapat dengan mudah menyalin kod tersebut ke file HTML untuk mengujinya.