您的位置：首页 > Web前端 > jquery > 正文

jQuery toggleClass

更多 时间：2015-11-23 类别：Web前端 浏览量：1564

jQuery toggleClass

jQuery toggleClass

一、jQuery 中 toggleClass方法的理解

1、用于切换当前jQuery对象所匹配的每一个元素上指定的css类名。

2、所谓"切换"，就是如果该元素上已存在指定的类名，则移除掉；如果不存在，则添加该类名。

 

二、toggleClass语法

 

1、类的切换

$(selector).toggleClass(class,switch)

 

参数说明

class

(1)、必需。规定添加或移除 class 的指定的css类名。

(2)、如需规定若干 class，请使用空格来分隔类名。

switch

(1)、可选。布尔值。

(2)、用于指定是只添加(true)还是只移除(false)指定的css类名。

 

2、使用函数来切换类

$(selector).toggleClass(function(index,class),switch)

 

参数说明

function(index,class)

(1)、必需。规定返回需要添加或删除的一个或多个类名的函数。

(2)、index - 可选。接受选择器的 index 位置。

(3)、class - 可选。接受选择器的当前的类。

switch

可选。布尔值。规定是否添加(true)或移除(false)类。

 

三、toggleClass 与 js 的等价代码

  •  
  • 
$element.toggleClass( className );
// 相当于
if( $element.hasClass( className ) ){
    $element.removeClass( className );
}else{
    $element.addClass( className ); 
}
//上面的className均表示单个css类名，如果是空格分隔的多个css类名，则等价部分的代码是需要循环执行的

/* ********** 分割线 ********** */

$element.toggleClass( className, true );
//相当于
$element.addClass( className ); 

/* ********** 分割线 ********** */

$element.toggleClass( className, false );
//相当于
$element.removeClass( className );

    •  

    四、toggleClass实例

     

    1、对添加和移除类进行切换

     

  • 
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("main");
  });
});
</script>
<style>
.main
{
font-size:120%;
color:red;
}
</style>


<p>This is a paragraph.</p>
<p class="main">This is another paragraph.</p>

<button>Toggle class "main" for p elements</button>

    •  

    2、使用函数切换类

     

  •  
  • HTML 代码   复制
  • 
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("li").toggleClass(function(n){
      return "listitem_" + n;
    });
  });
});
</script>
<style>
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>


<h1>This is a heading</h1>
<ul>
<li>Peter</li>
<li>Lois</li>
<li>Chris</li>
<li>Stewie</li>
</ul>

<button>Add/remove classes to list items</button>

				
    • 


    
	3、使用 switch 参数
    

    
	 
    

  • 
	
  • 
		 
    • 
	
  • 
		
  • 
			HTML 代码   复制
    • 
		
  • 
			
    
<script>
$(document).ready(function(){
  $("#add").click(function(){
    $("p").toggleClass("main",true);
  });
  $("#remove").click(function(){
    $("p").toggleClass("main",false);
  });
});
</script>
<style>
.main
{
font-size:120%;
color:red;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p class="main">This is another paragraph.</p>

<button id="add">Add class "main"</button>
<button id="remove">Remove class "main"</button>


		
    • 
	


    
	 
    
 
    
  
    标签：jquery   
    
 
    
 
    

    

    
              
  • 上一篇：mysql 内置函数
    •                 	  
			  
  • 下一篇：jquery中index()
    • 

  
     


    
  
    
      您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利