Bagaimana untuk Menyerlahkan Hanya Satu Item Senarai Pada Satu Masa Menggunakan `addClass()` dan `removeClass()` jQuery?

Tambah dan Alih Keluar Kelas dengan Klik Menggunakan jQuery

Apabila bekerja dengan item menu senarai, selalunya wajar untuk menyerlahkan item yang sedang aktif dengan menambah kelas. Walau bagaimanapun, anda mungkin menghadapi cabaran dalam memastikan hanya satu item mempunyai kelas pada satu masa.

Untuk menangani perkara ini, gunakan kaedah addClass() dan removeClass() jQuery. Pada mulanya, tambahkan kelas pada elemen permulaan yang diingini, seperti 'about-link'. Kemudian, gunakan pendengar acara pada item senarai ('menu li') untuk mengendalikan klik.

Di dalam pendengar acara, gunakan kaedah siblings() untuk mengalih keluar kelas daripada semua elemen item senarai lain. Ini memastikan bahawa hanya elemen yang diklik mengekalkan kelas. Walau bagaimanapun, untuk bermula dengan 'about-link' aktif, kami perlu menambah baris kod tambahan:

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

Dalam kod yang diubah suai ini, kami memilih elemen 'a' dalam item senarai (' menu li a') untuk memastikan kami menyasarkan pautan. Kami kemudian menggunakan kelas semasa sebagai pemilih untuk mengalih keluarnya daripada mana-mana pautan yang aktif sebelum ini sebelum menambahkannya pada pautan yang diklik. Ini menghapuskan keperluan untuk menambah kelas secara manual pada 'pautan tentang' dalam JavaScript awal.

Atas ialah kandungan terperinci Bagaimana untuk Menyerlahkan Hanya Satu Item Senarai Pada Satu Masa Menggunakan `addClass()` dan `removeClass()` jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!