Bagaimanakah Saya Boleh Togol Kelas CSS pada Klik Menggunakan jQuery untuk Mengurus Item Menu Aktif?

Menogol Kelas CSS pada Klik dengan jQuery

Untuk menambah dan mengalih keluar kelas CSS secara dinamik pada acara klik menggunakan jQuery, mari teroka perkara berikut isu.

Masalahnya: Menu terdiri daripada item senarai yang memerlukan kelas tertentu untuk menjadi aktif. Apabila mengklik item, kelas hendaklah ditambahkan hanya pada item itu sambil mengalih keluarnya daripada semua yang lain. Pada mulanya, "pautan tentang" sepatutnya mempunyai kelas "semasa" secara lalai.

Penyelesaian:

Untuk menyelesaikan isu ini, kami boleh menggunakan jQuery berikut kod:

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

Dalam kod ini:

• $('#menu li a') memilih semua elemen dalam
• elemen yang turunan elemen dengan ID "menu."
• .on('click', function()) mendaftarkan pendengar acara klik untuk elemen ini.
• Di dalam pengendali acara , .removeClass('current') mengalih keluar kelas "semasa" daripada yang sedang aktif elemen.
• .addClass('current') menambah kelas "current" pada elemen yang diklik.

Dengan mengikuti pendekatan ini, "about-link" pada mulanya akan mempunyai kelas "semasa" diberikan kepadanya menggunakan $('#about-link').addClass('current');. Apabila mana-mana item lain dalam menu diklik, kelas "semasa" dialih keluar daripada item yang aktif sebelum ini dan ditambahkan pada item yang diklik, memastikan hanya satu item kekal aktif pada setiap masa.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Togol Kelas CSS pada Klik Menggunakan jQuery untuk Mengurus Item Menu Aktif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!