toggleClass（）方法意味着，如果匹配的元素没有类名，则添加它；否则，将其添加。 如果匹配的元素已经具有类名，则将其删除。
让我们看一个例子，一个简单的“ p”标签。
<p>This is paragraph</p>调用$（'p'）。toggleClass（'highlight'） ，它将在'p'标签中添加一个高亮显示类。
<p class="highlight">This is paragraph</p>再次调用$（'p'）。toggleClass（'highlight'） ，它将从'p'标记中删除突出显示类。
<p>This is paragraph</p>toggleClass（）也等效于以下jQuery代码。
if ($('p').is('.highlight')) {
$('p').removeClass('highlight');
}
else{
$('p').addClass('highlight');
}jQuery toggleClass示例
<html>
<head>
<style type="text/css">
.highlight {
background:blue;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery toggleClass example</h1>
<p>This is paragraph1</p>
<p id="para2">This is paragraph2 (toggleClass effect)</p>
<p>This is paragraph3</p>
<p id="para4">This is paragraph4 (add/remove effect)</p>
<button id="toggleClass">toggle class</button>
<button id="addremoveClass">Add/Remove class</button>
<script type="text/javascript">
$("#toggleClass").click(function () {
$('#para2').toggleClass('highlight');
});
$("#addremoveClass").click(function () {
if ($('#para4').is('.highlight')) {
$('#para4').removeClass('highlight');
}
else{
$('#para4').addClass('highlight');
}
});
</script>
</body>
</html>
1422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
