Bagaimanakah Saya Boleh Menambah Kelas Navigasi Aktif secara Dinamik pada Menu Laman Web Saya Menggunakan JavaScript?

Tambahkan Kelas Navigasi Aktif Dinamik pada Menu

Apabila menavigasi halaman web, adalah perkara biasa untuk menyerlahkan item menu aktif yang sepadan dengan halaman semasa . Ini meningkatkan pengalaman pengguna dengan menyediakan isyarat visual untuk lokasi semasa dalam hierarki tapak.

Untuk melaksanakan fungsi ini, kami akan menggunakan JavaScript untuk mengenal pasti URL semasa dan menambah kelas "aktif" pada item menu yang sesuai .

Cara Menambah Kelas Navigasi Aktif Menggunakan JavaScript

Mari kita periksa penyelesaian menggunakan Pustaka berkuasa jQuery:

$(function () {
    var current = location.pathname;
    $('#nav li a').each(function () {
        var $this = $(this);
        if ($this.attr('href').indexOf(current) !== -1) {
            $this.addClass('active');
        }
    });
});

Penjelasan:

• Apabila dokumen sedia, skrip dimulakan.
• Lokasi.nama laluan hartanah mendapatkan semula laluan halaman semasa.
• Ia berulang melalui setiap sauh item menu tags ($('#nav li a')).
• Untuk setiap teg anchor, ia menyemak sama ada atribut hrefnya mengandungi laluan semasa menggunakan fungsi indexOf().
• Jika ia menemui padanan, tag anchor yang sepadan diberikan kelas "aktif".

Penting Nota:

Jika menu mengandungi berbilang pautan yang menghala ke halaman yang sama, pendekatan ini mungkin tidak menentukan item aktif dengan tepat. Dalam senario sedemikian, logik tambahan mungkin diperlukan untuk mengendalikan kes ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Kelas Navigasi Aktif secara Dinamik pada Menu Laman Web Saya Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!