Bagaimana untuk Menambah Kelas 'Aktif' secara Dinamik pada Pautan Navigasi Berdasarkan URL Semasa?

Tambah Kelas Navigasi Aktif untuk Mencerminkan URL Semasa

Menavigasi tapak web selalunya memerlukan petunjuk yang boleh dilihat pada halaman semasa, yang boleh dicapai dengan menambah kelas "aktif" pada item menu yang sepadan. Artikel ini menunjukkan cara untuk melaksanakan fungsi ini menggunakan JavaScript.

Pertimbangkan contoh menu navigasi di bawah, di mana pautan "Urus" sepatutnya muncul sebagai "aktif" pada halaman "manageIS.aspx":

<ul>

Coretan JavaScript berikut akan mencapai kesan yang diingini:

$(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 menetapkan semasa nama laluan halaman kepada pembolehubah "semasa". Ia kemudian melelang ke atas semua pautan menu dan menyemak sama ada atribut "href" mereka sepadan dengan laluan semasa. Jika padanan ditemui, kelas "aktif" ditambahkan pada pautan itu.

Tidak seperti JavaScript asal yang disediakan dalam soalan, pendekatan ini tidak bergantung pada acara klik dan dilaksanakan pada pemuatan halaman. Oleh itu, kelas "aktif" berterusan sepanjang hayat halaman, memberikan petunjuk yang jelas tentang halaman semasa pada setiap masa.

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