jquery klik tambah gaya padam

jquery ialah perpustakaan JavaScript yang cekap dan biasa digunakan. Ia digunakan terutamanya untuk memudahkan traversal dan pengendalian dokumen HTML, pemprosesan acara dan pelaksanaan kesan animasi yang sering digunakan oleh pembangun bahagian hadapan untuk membangunkan halaman web yang sangat interaktif . Menambah dan memadam gaya dalam jQuery juga merupakan tugas biasa Di bawah ini kami akan memperkenalkan cara menggunakan jQuery untuk menambah dan memadam gaya dengan satu klik.

Pertama, kita perlu mencipta senarai gaya ringkas menggunakan HTML dan CSS. Dalam HTML, kita boleh mencipta senarai tidak tertib mudah menggunakan tag ul dan li, kodnya adalah seperti berikut:

<ul class="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Seterusnya, dalam CSS, kita boleh menentukan gaya untuk item senarai supaya apabila menambah dan mengalih keluar gaya gunakan . Kodnya adalah seperti berikut:

.myList li{
  padding:10px;
  border:1px solid black;
  cursor:pointer;
}
.myList li.selected{
  background-color:gray;
  color:white;
}

Sekarang, dalam fail JavaScript, kita boleh menggunakan jQuery untuk menambah dan mengalih keluar gaya. Mula-mula, kita perlu mencari semua item senarai menggunakan pemilih jQuery dan menambah acara klik padanya menggunakan fungsi click(), kodnya adalah seperti berikut:

$(document).ready(function(){
  $('.myList li').click(function(){
    //代码将在此处添加
  });
});

Dalam acara klik, kita boleh menggunakan fungsi toggleClass() untuk Tambah atau alih keluar kelas .selected, gaya yang telah ditakrifkan dalam CSS. Kodnya adalah seperti berikut:

$(document).ready(function(){
  $('.myList li').click(function(){
    $(this).toggleClass('selected');
  });
});

Kini, apabila item senarai diklik, mereka akan menogol gaya keadaan yang dipilih. Jika ia sudah dipilih, nyahpilihnya dan sebaliknya. Contoh ini boleh diterima pakai dalam talian: https://codepen.io/alenaofficial/pen/zYGOYap

Semudah itu untuk menambah dan memadam gaya, dan menggunakan jQuery, kami boleh melaksanakan perubahan gaya dinamik dengan mudah untuk meningkatkan pengalaman pengguna .

Atas ialah kandungan terperinci jquery klik tambah gaya padam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!