Bagaimanakah Saya Boleh Menambah Kelas 'Aktif' pada Menu Navigasi Saya untuk Menyerlahkan Halaman Semasa?

Tambahkan Kelas Navigasi Aktif untuk Mencerminkan Halaman Semasa

Dalam pembangunan web, adalah perkara biasa untuk menyerlahkan item menu yang mewakili halaman yang sedang aktif. Untuk mencapai matlamat ini, anda boleh menambah kelas "aktif" pada item senarai menu yang sepadan secara dinamik. Begini cara anda boleh melakukannya menggunakan JavaScript:

JavaScript Kod:

$(function(){

var current = location.pathname;
$('#nav li a').each(function(){
    var $this = $(this);
    // if the current path is like this link, make it active
    if($this.attr('href').indexOf(current) !== -1){
        $this.addClass('active');
    }
})

})

Penjelasan:

Coretan kod ini mencapai hasil yang diingini dengan mengikat pengendali acara kepada acara sedia dokumen (yang mencetuskan apabila halaman telah dimuatkan sepenuhnya). Ia kemudian melelang melalui setiap pautan dalam menu dan menyemak sama ada atribut hrefnya sepadan dengan nama laluan halaman semasa. Jika padanan ditemui, kelas "aktif" ditambahkan pada pautan yang sepadan, secara visual menunjukkan bahawa pengguna berada di halaman yang sepadan.

Menggunakan Kod:

Untuk melaksanakan fungsi ini di tapak web anda, hanya salin dan tampal kod JavaScript ke dalam pengepala halaman anda. Pastikan kod berada dalam tag dan anda memasukkan perpustakaan jQuery sebagai prasyarat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Kelas 'Aktif' pada Menu Navigasi Saya untuk Menyerlahkan Halaman Semasa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!