jQuery 属性操作 - toggleClass() 方法
2017-02-03 15:19
639 查看
实例
对设置和移除所有元素的 "main" 类进行切换:
$("button").click(function(){ $("p").toggleClass("main"); });
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){ $("p").toggleClass("main"); });
});
</script>
<style type="text/css">
.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>
</body>
定义和方法
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。
语法
$(selector).toggleClass(class,switch)
参数
参数 | 描述 |
---|---|
class | 必需。规定添加或移除 class 的指定元素。 如需规定若干 class,请使用空格来分隔类名。 |
switch | 可选。布尔值。规定是否添加或移除 class。 |
使用函数来切换类
$(selector).toggleClass(function(index,class),switch)
例子
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $('ul li').toggleClass(function(){ return 'listitem_' + $(this).index(); }); }); }); </script> <style type="text/css"> .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> </body> </html>
参数
参数 | 描述 |
---|---|
function(index,class) | 必需。规定返回需要添加或删除的一个或多个类名的函数。 index - 可选。接受选择器的 index 位置。 class - 可选。接受选择器的当前的类。 |
switch | 可选。布尔值。规定是否添加(true)或移除(false)类。 |
相关文章推荐
- jQuery实现的浮动层div浏览器居中显示效果
- jqueryajax 向springmvc controller传值
- 一个完整的jQuery datatable示例
- $(function()与(function($)等的区别详细
- jQuery--其他
- jQuery表格的维护和删除操作
- webpack如何全局引入jquery和插件?
- jquery.datatables添加跳转到指定页
- jquery概览
- jquery整合到spring中
- jquery入门
- 详解JQuery Ajax 在asp.net中使用总结
- jQuery读取XML文件的方法示例
- jquery表格的维护和删除
- jquery index()
- 分享jQuery封装好的一些常用操作
- 关于使用ajaxSubmit来上传图片
- jQuery--Ajax
- jQuery实现复选框的全选和反选
- 完美解决jQuery符号$与其他javascript 库、框架冲突的问题