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
  • index - Returns the index position of the element in the set
  • currentclass - Returns current class name of selected elements
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的更多相关文章

  1. 原生JavaScript实现hasClass、addClass、removeClass、toggleClass

    兼容IE6+,因IE6.IE7.IE8不支持Array.prototype.indexOf()和String.prototype.trim(),分别用Polyfill实现支持. 详细: indexOf ...

  2. jQuery知识点一 each()和toggleClass()

    jQuery的一些东东比较容易忘,所以在这里整理一下... ... 1. each (1) $(selector).each(function(index,element))         inde ...

  3. jquery之toggleClass应用

    今天记载一下常用的html + css + jquery效果应用 1.html内容 <div class="selBtn screen_btn"> <a id=& ...

  4. js实现css、addClass、removeClass和toggleClass

    JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象 ...

  5. addClass, removeClass, toggleClass（从jquery中抠出来）

    <div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...

  6. addClass() 和 toggleClass()

    addClass()是在原有的类基础上增加类属性,仍然保留原有的类的样式.语法格式为:addClass(class0 class1 ...) ,例如: $("p").addClas ...

  7. jquery实现页面动态切换的方法--toggleClass(className)

    $(function() { $(".A").click(function() { $(this).toggleClass("B"); }); }); 当点击带 ...

  8. zepto - toggleClass

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. toggleClass() 方法做类似于微信扣扣点击语音图标按钮变成切换到语音输入功能，点击键盘图标按钮切换到文字输入状态的效果

    就是这种效果的类似. <html><head><script type="text/javascript" src="/jquery/jqu ...

随机推荐

  1. ruby中迭代器枚举器的理解

    参考<ruby编程语言>5.3迭代器和可枚举对象 迭代器一个迭代器是一个方法,这个方法里面有yield语句,这个方法里的yield语句,与传递给这个方法的块进行数据传输 yield将数据传 ...

  2. DedeTag Engine Create File False提示的种种原因及解决方法

    DedeTag Engine Create File False提示的种种原因及解决方法 第一种情况:站点.文件夹权限不足造成无法建立文件 这种情况的出现,一方面可能是Apache设置的读写权限较严格 ...

  3. springmvc+ajaxFileUpload上传文件(前后台彻底分离的情况下)

    首先是导入jar包: web.xml: <servlet> <servlet-name>mvc-dispatcher</servlet-name> <serv ...

  4. Entity Framework6 访问MySQL

    先用PM命令安装EF6,MySQL提供的EF实现新增.删除.修改是采用存储过程实现的 Install-Package EntityFramework 配置修改如下 <?xml version=& ...

  5. [SQL]SQL优化34条

    我们要做到不但会写SQL,还要做到写出性能优良的SQL,以下为笔者学习.摘录.并汇总部分资料与大家分享! () 选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE 的解析器按照从右到 ...

  6. POJ 2154 【POLYA】【欧拉】

    前记: TM终于决定以后干啥了.这几天睡的有点多.困饿交加之间喝了好多水.可能是灌脑了. 切记两件事: 1.安心当单身狗 2.顺心码代码 题意: 给你N种颜色的珠子,串一串长度问N的项链,要求旋转之后 ...

  7. NYOJ 55-懒省事的小明

    点击打开链接 懒省事的小明 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述       小明很想吃果子,正好果园果子熟了.在果园里,小明已经将所有的果子打了下来,而且按果 ...

  8. oracle分布式事务总结-转载

    基本概念 Local Coordinator:在分布事务中,必须参考其它节点上的数据才能完成自己这部分操作的站点. Global Coordinator:分布事务的发起者,负责协调这个分布事务. Co ...

  9. HDFS副本机制&负载均衡&机架感知&访问方式&健壮性&删除恢复机制&HDFS缺点

    副本机制 1.副本摆放策略 第一副本:放置在上传文件的DataNode上:如果是集群外提交,则随机挑选一台磁盘不太慢.CPU不太忙的节点上:第二副本:放置在于第一个副本不同的机架的节点上:第三副本:与 ...

  10. 【Unity Shaders】学习笔记——SurfaceShader（九）Cubemap

    [Unity Shaders]学习笔记——SurfaceShader(九)Cubemap 如果你想从零开始学习Unity Shader,那么你可以看看本系列的文章入门,你只需要稍微有点编程的概念就可以 ...