<!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>
