cari

Rumah  >  Artikel  >  hujung hadapan web  >  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
WBOYasal
2016-05-16 15:26:251522semak imbas

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>

kaedah jQuery toggleClass()

Contoh

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

$("button").click(function(){
$("p").toggleClass("main");
});
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)
Kenyataan：
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 sebelumnya：Penjelasan terperinci tentang mencipta objek berdasarkan JavaScript berorientasikan objekArtikel seterusnya：Penjelasan terperinci tentang mencipta objek berdasarkan JavaScript berorientasikan objek

Artikel berkaitan

Lihat lagi