Bagaimanakah JavaScript Boleh Menambah Kelas 'Aktif' pada Pautan Navigasi Berdasarkan URL Semasa?

Menambah Kelas Navigasi Aktif Berdasarkan URL: Panduan dengan JavaScript

Menavigasi tapak web yang kompleks memerlukan pengguna mengenal pasti halaman semasa dengan cekap dalam menu struktur. Untuk meningkatkan pengalaman pengguna, menambahkan kelas aktif pada item navigasi yang sepadan dengan halaman semasa semasa halaman dimuatkan adalah penting.

Kod JavaScript yang disediakan malangnya tidak mencapai matlamat ini kerana ia bertindak balas kepada klik pengguna, bukan pemuatan halaman . Untuk menangani perkara ini, kami perlu melaksanakan JavaScript yang memeriksa URL halaman semasa dan menambahkan kelas aktif secara dinamik pada item menu yang sesuai.

Berikut ialah blok JavaScript yang disemak semula yang menyelesaikan tugas ini:

$(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');
        }
    })
})

Kod ini memanfaatkan jQuery untuk berulang melalui setiap pautan item menu dan membandingkan atribut hrefnya dengan nama laluan halaman semasa. Selepas perlawanan, kelas aktif ditambahkan pada pautan yang sepadan.

Dengan menggunakan pelaksanaan JavaScript yang betul dan perbandingan logik, kami boleh menambah kelas aktif secara elegan pada item navigasi yang betul, meningkatkan kejelasan navigasi tapak web.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Menambah Kelas 'Aktif' pada Pautan Navigasi Berdasarkan URL Semasa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!