jQuery clicks to change class and toggle and toggleClass() method definition usage

jQuery clicks to change class and toggle and toggleClass() method definition usage_jquery

WBOY

Release： 2016-05-16 15:26:25

Original

1521 people have browsed it

I am in the old style, so without further ado, I will post the code.

<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>

Copy after login

jQuery toggleClass() method

Example

Toggle the "main" class that adds and removes all

elements:

$("button").click(function(){
$("p").toggleClass("main");
});

Copy after login

Definition and usage

The toggleClass() method switches between adding and removing one or more classes of the selected element.

This method checks the specified class in each element. Adds the class if it does not exist, or removes it if it is set. This is called a toggle effect.

However, by using the "switch" parameter, you can specify that only classes be removed or only added.

Grammar

$(selector).toggleClass(classname,function(index,currentclass),switch)

Copy after login