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

Bagaimana untuk Menambah dan Mengalih Keluar Kelas dengan Klik Menggunakan jQuery?

Dalam jQuery, anda boleh memanipulasi kelas CSS secara dinamik pada elemen dengan addClass( ), kaedah removeClass(), dan toggleClass(). Ini boleh berguna untuk melaksanakan tingkah laku dinamik, seperti menambah atau mengalih keluar keadaan aktif atau menyerlahkan item menu.

Contoh: Menambah dan Mengalih Keluar Kelas dengan Klik

Andaikan anda mempunyai menu dengan

elemen. Anda ingin menambah kelas "semasa" pada elemen yang diklik sambil mengalih keluarnya daripada semua elemen lain. Ini memastikan bahawa hanya satu elemen mempunyai kelas "semasa" pada satu masa.

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

barang. Secara lalai,

elemen tidak mempunyai atribut href, jadi peristiwa klik tidak dicetuskan padanya secara langsung.

Atas ialah kandungan terperinci Bagaimana Menggunakan jQuery untuk Menambah dan Mengalih Keluar Kelas CSS pada Klik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!