toggleClass
toggleClass 用来给匹配元素切换类
语法
参考 http://www.w3schools.com/jquery/html_toggleclass.asp
$(selector).toggleClass(classname,function(index,currentclass),switch)
但是个人感觉应该是这样的:
$(selector).toggleClass(classname)
$(selector).toggleClass(classname,switch)
$(selector).toggleClass(function(index,currentclass),switch)
同时指定了classname和function 只有classname生效
参数说明
Parameter | Description |
---|---|
classname | Required. Specifies one or more class names to add or remove. To specify several classes, separate the class names with a space |
function(index,currentclass) | Optional. Specifies a function that returns one or more class names to add/remove
|
switch | Optional. A Boolean value specifying if the class should only be added (true), or only be removed (false) |
解释
- classname 必须的,指定一个或多个类名来添加或移除,多个类名之间用空格分隔
- function(index,currentclass) 可选的 使用一个方法来返回一个或多个类名来添加或删除,
index 返回元素的在集合中的序号
currentclass 返回选中元素当前的类名 switch 可选 布尔值,如果为true 则只添加 false只删除 相当于addClass和removeClass
demo
指定classname来切换类
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggleClass("main"); }); }); </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>Toggle class "main" for p elements</button> </body> </html>
结果 :
点击切换按钮后,两个段落的文本红色显示将进行切换,默认第一个没有main而第二个有 第一次点击时,给第一个添加 给第二个移除,之后的点击以此类推如果一次操作多个类 类名之间空格分隔即可
参数switch
加上参数switch 值为true或false
为true是只添加,false只移除,作用应该和addClass removeClass 相同
function返回类名
关于使用function来返回类名,在一个w3c上的demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/common.css">
<script src="js/jquery-1.11.0.min.js"></script>
<style>
.listitem_1,
.listitem_3 {
color: red;
}
.listitem_0,
.listitem_2 {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>Peter</li>
<li>Lois</li>
<li>Chris</li>
<li>Stewie</li>
</ul>
<button>Add/remove classes to list items</button>
</body>
<script>
$(document).ready(function() {
$("button").click(function() {
$("li").toggleClass(function(n) {
return "listitem_" + n;
});
});
});
</script>
</html>
点击按钮切换:
<!-- 状态1 -->
<ul>
<li class="">Peter</li>
<li class="">Lois</li>
<li class="">Chris</li>
<li class="">Stewie</li>
</ul>
<!-- 状态2 -->
<ul>
<li class="listitem_0">Peter</li>
<li class="listitem_1">Lois</li>
<li class="listitem_2">Chris</li>
<li class="listitem_3">Stewie</li>
</ul>
toggleClass的更多相关文章
- 原生JavaScript实现hasClass、addClass、removeClass、toggleClass
兼容IE6+,因IE6.IE7.IE8不支持Array.prototype.indexOf()和String.prototype.trim(),分别用Polyfill实现支持. 详细: indexOf ...
- jQuery知识点一 each()和toggleClass()
jQuery的一些东东比较容易忘,所以在这里整理一下... ... 1. each (1) $(selector).each(function(index,element)) inde ...
- jquery之toggleClass应用
今天记载一下常用的html + css + jquery效果应用 1.html内容 <div class="selBtn screen_btn"> <a id=& ...
- js实现css、addClass、removeClass和toggleClass
JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象 ...
- addClass, removeClass, toggleClass(从jquery中抠出来)
<div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...
- addClass() 和 toggleClass()
addClass()是在原有的类基础上增加类属性,仍然保留原有的类的样式.语法格式为:addClass(class0 class1 ...) ,例如: $("p").addClas ...
- jquery实现页面动态切换的方法--toggleClass(className)
$(function() { $(".A").click(function() { $(this).toggleClass("B"); }); }); 当点击带 ...
- zepto - toggleClass
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js实现增加(addclass),删除(removeclass),判断是否存在(hasclass),如果存在删除,如果不存在添加(toggleclass)和获取类名(getbyclass)的方法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- toggleClass() 方法做类似于微信扣扣点击语音图标按钮变成切换到语音输入功能,点击键盘图标按钮切换到文字输入状态的效果
就是这种效果的类似. <html><head><script type="text/javascript" src="/jquery/jqu ...
随机推荐
- 改变select组件的option选中状态的快捷方法
以前我都是在<option>标签处通过判断value是否与其中一个相同然后输出selected="selected"来处理的,今天发现可以直接能过Js改变<sel ...
- NodeJS学习历程 - (一)工具篇
后端工具 1.express:开发框架 npm install express 2.mongoose:MongoDB的处理插件 npm install mongoose 教程一:Mongoose全面理 ...
- Citrix 服务器虚拟化之二十一 桌面虚拟化之部署Provisioning Services
Citrix 服务器虚拟化之二十一 桌面虚拟化之部署Provisioning Services Provisioning Services 是Citrix 出品的一系列虚拟化产品中最核心的一个组件, ...
- 新建的表如果还没有数据,用exp导的时候会忽略
源地址:http://www.07net01.com/2015/07/884873.html
- nvl
NVL是Oracle PL/SQL中的一个函数.它的格式是NVL( string1, replace_with).它的功能是如果string1为NULL,则NVL函数返回replace_with的值, ...
- IIS6.0中布署MVC站点(转)
昨晚我写的API上线,API是vs2010 + MVC4开发的,需要布署到windows 2003 server + IIS6.0的环境中,之前一直是布在IIS7.0,比较熟悉, 换到IIS6.0,添 ...
- CentOS 的网络配置
1, ifcfg-ethX, 设置对应网口的IP等信息, 比如第一个网口, 那么vim /etc/sysconfig/network-scripts/ifcfg-eth0,配置例子: DEVICE=& ...
- cocos2d-x 菜单
菜单在游戏中是非常常见的控件之一.下面来分析下在cocos2dx中有那些菜单. 一共有六种菜单. CCMenu在创建时需要使用CCMenuItem来创建. CCMenu继承自CCLayer,是一个菜单 ...
- MFC创建非模态对话框并修改CStatic文字
//由IDD_STATUS_DIALOG创建一个对话框CDialog* pCheckNetStatusDlg = new CDialog(); pCheckNetStatusDlg->Creat ...
- app控件获取之uiautomatorviewer
初探 在Android的SDk提供了以下的工具来支持我们进行UI自动化测试: uiautomatorviewer:用来扫描和分析Android应用程序的UI控件的工具. uiautomator:一个包 ...