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