search

Home  >  Article  >  Web Front-end  >  jQuery clicks to change class and toggle and toggleClass() method definition usage_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:26:251522browse

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>

jQuery toggleClass() method

Example

Toggle the "main" class that adds and removes all e388a4556c0f65e1904146cc1a846bee elements: 

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

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)
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of creating objects based on object-oriented JavaScriptNext article：Detailed explanation of creating objects based on object-oriented JavaScript

Related articles

See more