Bagaimanakah Saya Boleh Menggunakan jQuery untuk Menguruskan Keadaan Aktif Item Menu?

Menukar Keadaan Item Menu dengan jQuery

Dalam siaran ini, kami akan menyelidiki cara menggunakan keupayaan jQuery untuk mengurus kelas secara dinamik gaya untuk item senarai dalam menu. Matlamatnya adalah untuk menambah kelas 'semasa' pada item senarai tertentu apabila diklik dan pada masa yang sama mengeluarkannya daripada semua item lain.

Persediaan Awal

Untuk memulakan fungsi , kita perlu mentakrifkan item menu terlebih dahulu dengan

elemen dan pautan menggunakan tag . Kami akan menambah kelas 'semasa' pada salah satu pautan item senarai untuk menunjukkan item yang dipilih pada mulanya:

<ul>

Menambah Pendengar Acara

Menggunakan jQuery , kami melampirkan pendengar acara pada setiap pautan item senarai untuk mengendalikan klik acara:

$('#menu li a').on('click', function() {
  // Add 'current' class to this list item
  $(this).addClass('current');
  
  // Remove 'current' class from all other list items
  $('#menu li a.current').not(this).removeClass('current');
});

Penjelasan

Dalam pendengar acara, coretan kod jQuery melaksanakan tugas berikut:

1. Menambah ' semasa' ke pautan item senarai yang diklik menggunakan $(this).addClass('current').
2. Alih keluar kelas 'current' daripada semua pautan item senarai lain dengan menggunakan $('#menu li a.current').not(this).removeClass ('semasa'). Baris ini memilih semua pautan dengan kelas 'semasa' dan mengecualikan yang sedang diklik.

Hasil

Akibatnya, apabila pengguna mengklik mana-mana daripada item menu, pautannya akan mendapat gaya kelas 'semasa', manakala kelas 'semasa' akan dialih keluar daripada item yang aktif sebelum ini. Ini memastikan bahawa hanya satu pautan item senarai mempunyai penggayaan semasa pada bila-bila masa.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan jQuery untuk Menguruskan Keadaan Aktif Item Menu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!