Bagaimana Menggunakan jQuery untuk Menambah dan Mengalih Keluar Kelas CSS pada Klik?

Berikut ialah penyelesaian jQuery:

$('#menu li').on('click', function() {
    $(this).addClass('current').siblings().removeClass('current');
});

Kod ini menggunakan perwakilan acara untuk melampirkan pengendali klik pada semua < li> elemen dalam bekas dengan ID "menu." Apabila elemen diklik, ia menambahkan kelas "semasa" pada dirinya sendiri dan mengalih keluar kelas yang sama daripada semua adik-beradiknya menggunakan kaedah adik-beradik().

Pertimbangan Tambahan: Memulakan Kelas "semasa"

Pada mulanya, anda perlu menetapkan kelas "semasa" pada salah satu item menu. Anda boleh melakukan ini menggunakan:

$('#about-link').addClass('current');

Ini menambahkan kelas "semasa" pada elemen dengan ID "pautan-pautan", memastikan ia bermula sebagai item aktif.

Penyelesaian yang Diperbaiki

Berikut ialah penyelesaian yang dipertingkatkan yang memudahkan kod:

$('#menu li a').on('click', function(){
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

Ini berfungsi sama seperti kod sebelumnya tetapi menyasarkan elemen dalam