masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > jQuery klik untuk menukar kelas dan togol dan toggleClass() kaedah takrifan usage_jquery

jQuery klik untuk menukar kelas dan togol dan toggleClass() kaedah takrifan usage_jquery

WBOY
Lepaskan： 2016-05-16 15:26:25
asal
1532 orang telah melayarinya

Saya menggunakan gaya lama, jadi tanpa berlengah lagi, saya akan menghantar kod tersebut. 

<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
.bg1 {
  background-image:url(images/21.jpg);
  background-repeat:no-repeat;
  color:#0CF;
}
.bg2 {
  background-image:url(images/22.jpg);
  background-repeat:no-repeat;
  color:#F00;
}
</style>
<script type="text/javascript">
//参数para1：希望隐藏元素的id值
function toggle1(para1){
  if ($("#p2").attr("class")=="bg1")
  {
    $("#p2").attr("class","bg2");
  }
  else 
  {
    $("#p2").attr("class","bg1");
  }
  $("#"+para1).toggle();
}
</script>
</head>
<body>
<p id="p1">此处将显示或隐藏</p>
<p id="p2" class="bg1" onClick="toggle1('p1')" style="height:31px">点击此处显示或隐藏上面部分并更换自己的样式(包括背景图、字体等）</p>
</body>
</html>
Salin selepas log masuk

kaedah jQuery toggleClass()

Contoh

Togol kelas "utama" yang menambah dan mengalih keluar semua elemen 

$("button").click(function(){
$("p").toggleClass("main");
});
Salin selepas log masuk
Takrif dan penggunaan

Kaedah toggleClass() bertukar antara menambah dan mengalih keluar satu atau lebih kelas elemen yang dipilih.

Kaedah ini menyemak kelas yang ditentukan dalam setiap elemen. Menambah kelas jika ia tidak wujud, atau mengalih keluarnya jika ia ditetapkan. Ini dipanggil kesan togol.

Walau bagaimanapun, dengan menggunakan parameter "suis", anda boleh menentukan bahawa hanya kelas akan dialih keluar atau hanya ditambah.

Tatabahasa

$(selector).toggleClass(classname,function(index,currentclass),switch)
Salin selepas log masuk
Label berkaitan：
jquery点击改变class jquery_toggleclass jquery改变class jquery_togg
sumber：php.cn
Artikel sebelumnya：Penjelasan terperinci tentang mencipta objek berdasarkan JavaScript berorientasikan objek Artikel seterusnya：Tiga cara untuk SpringMVC mengembalikan kemahiran data_javascript json
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Kemas kini status tidak berfungsi dalam React-Native pada Android Saya mempunyai beberapa kod yang mempunyai sepasang imej dalam galeri mendatar boleh leret...
daripada 2024-04-06 16:54:10
0
1
410
Api peralihan anak batin Ini adalah contoh minimum yang boleh dihasilkan semula. Hujung peralihan tuding "togo...
daripada 2024-04-02 14:38:29
0
1
262
Tidak boleh menggunakan penapis CSS pada tuding dalam Safari Saya perhatikan bahawa membuat perubahan pada sifat penapis pada tuding menyebabkan tingka...
daripada 2024-04-01 08:19:51
0
1
387
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan