<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>zepto</title>

    <style>

        .main {

            font-size: 120%;

            color: red;

        }

    </style>

</head>

<body>

<h1 id="h1">This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button class="btn1">切换段落的 "main" 类</button>

<script src="zepto.min.js"></script>

<script>

    $("button").click(function () {

        $("p").toggleClass("main");

    });

</script>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>zepto</title>

    <style>

        .listitem_1, .listitem_3 {

            color: red;

        }

        .listitem_0, .listitem_2 {

            color: blue;

        }

    </style>

</head>

<body>

<h1 id="h1">This is a heading</h1>

<ul>

    <li>Apple</li>

    <li>IBM</li>

    <li>Microsoft</li>

    <li>Google</li>

</ul>

<button class="btn1">添加或移除列表项的类</button>

<script src="zepto.min.js"></script>

<script>

    $("button").click(function () {

        $('ul li').toggleClass(function () {

            return 'listitem_' + $(this).index();

        });

    });

</script>

</body>

</html>

zepto - toggleClass的更多相关文章

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

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

  2. [原创]zepto打造一款移动端划屏插件

    最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其 ...

  3. Zepto中文API

    原文地址:http://zeptojs.com/ 译文地址:http://www.html-5.cn/Manual/Zepto/ Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,  ...

  4. 学习zepto.js(对象方法)[1]

    zepto也是使用的链式操作,链式操作:函数返回调用函数的对象. 但并不是所有的对象方法都可以进行链式操作,举几个例子:.size(),.html()|.text()//不传参数的情况下; 若非特殊说 ...

  5. Zepto源码

    // Zepto.js // (c) 2010-2016 Thomas Fuchs // Zepto.js may be freely distributed under the MIT licens ...

  6. zepto.js 源码解析

    http://www.runoob.com/w3cnote/zepto-js-source-analysis.html Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  7. zepto源码注解

    /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...

  8. zepto源代码解读

    /** * Created by nono on 14-11-16. */ /* Zepto v1.1.4 - zepto event ajax form ie - zeptojs.com/licen ...

  9. Zepto源码注释

    /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...

随机推荐

  1. AT&T ASSEMBLY FOR LINUX AND MAC (SYS_FORK)

    Fork() in C: (sys_fork.c) #include <stdio.h> #include <stdlib.h> #include <unistd.h&g ...

  2. python的反射

    目前大多数网站都是通过路由的方法来,处理url请求,如果有很多个url的话,不停的include或者用if判断匹配,似乎不太符合情理,因此这里讲讲python的反射机制, 自动装在模块.请看下面的实例 ...

  3. asynchttpClient框架关于多文件批量上传的问题，改用xUtil

    RequestParams params = new RequestParams(); params.add("ordernum",ordernum); params.add(&q ...

  4. android: SQLite升级数据库

    如果你足够细心,一定会发现 MyDatabaseHelper 中还有一个空方法呢!没错,onUpgrade() 方法是用于对数据库进行升级的,它在整个数据库的管理工作当中起着非常重要的作用,可 千万不 ...

  5. SourceTree - 正在检查源... When cloning a repository, "Checking Source" spins forever

    I am trying to clone a repository, my OpenSSH is set up correctly and I can do everything fine in Gi ...

  6. Cocos2dx.3x入门三部曲-Hello Game项目解析(三)

    一.前提: 完成Hello Game项目的创建编译. 具体参考:Cocos2dx.3x_Hello Game项目创建篇 二.本篇目标: l  分析proj.win32工程的主要构成 l  分析proj ...

  7. nginx内置全局变量及含义

    名称        版本        说明(变量列表来源于文件 ngx_http_variables ) $args        1.0.8        请求中的参数; $binary_remo ...

  8. 单点登录 SSO（Single Sign-On）的实现原理

    为什么要 SSO? 企业的信息化过程是一个循序渐进的过程,这就造成在企业的不同时期,根据业务和发展需要,构建了多个应用程序,而这些应用程序在功能.设计和技术可能都有所不同,就形成了各自独立的用户库和用 ...

  9. android开发常见编程错误总结

    1.设置TextView的文本颜色 1 2 3 TextView tv; ... tv.setTextColor(R.color.white); 其实这样设置的颜色是 R.color.white的资源 ...

  10. 获取枚举类型的描述description

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...