Mengatur item menu aktif berdasarkan URL saat ini dengan jQuery

Masalah ini muncul berulang kali saat membangun situs web: Bagaimana cara menentukan lokasi pengguna saat ini sehingga saya dapat menyorot bagian aktif di menu navigasi? Ini adalah kebutuhan dasar tetapi solusinya tampaknya diciptakan kembali pada setiap bangunan baru.

Ada dua rute utama yang dapat Anda ambil saat menyelesaikan masalah ini secara dinamis, sisi server dan sisi klien. Memecahkan ini di sisi server bagus karena Anda akan memiliki pegangan yang lebih baik pada halaman yang diminta, tetapi tidak selalu praktis. Dengan sedikit perencanaan, cukup mudah untuk menyelesaikan ini di sisi klien menggunakan JavaScript (dan secara opsional jQuery).

Anggaplah Anda memiliki menu navigasi dasar di header dan Anda ingin mengubah warna latar belakang halaman yang Anda buka saat ini.

Idealnya, ketika Anda mengklik Tur dan Anda dibawa ke halaman Tur, Anda ingin menu tersebut mencerminkan lokasi Anda saat ini.

Untuk melakukan ini menggunakan jQuery, kita akan membandingkan atribut href dari setiap tautan menu ke URL browser saat ini dan mencoba menemukan kecocokan. Jika kecocokan ditemukan, kita akan menyetel elemen itu menjadi aktif dengan menambahkan kelas ke

  • elemen.

    Hasil bersih dari contoh yang sangat mendasar ini terlihat seperti ini

    Pada setiap pemuatan halaman, skrip ini mengeksekusi dan membandingkan href dari setiap link menu ke URL halaman saat ini yang dimulai setelah nama domain dan berlanjut ke depan sebanyak karakter yang ada di href (mirip dengan fungsi beginWith ()). Ini memungkinkan setiap sub-halaman "Tur" juga menandai Tur sebagai bagian aktif, misalnya, /tour/section2.html. Ketika kecocokan ditemukan, elemen induk - dalam hal ini sebuah

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

    Solusi ini dapat ditemukan di jsFiddle untuk digunakan dan juga disematkan di bawah. Hal utama yang perlu Anda ubah untuk kebutuhan Anda sendiri adalah pemilih ".nav" pada baris 9 JavaScript. Ini harus dimodifikasi untuk memilih elemen navigasi yang ingin Anda proses.

    Perhatikan bahwa contoh jsFiddle tidak akan berfungsi karena Anda tidak dapat benar-benar mengubah URL di jendela hasil, tetapi Anda dapat dengan mudah menyalin kode ke file HTML untuk mengujinya.