jquery是一种高效且常用的javascript库，主要用于简化html文档的遍历和操作、事件处理、动画效果的实现，前端开发者经常使用它来开发交互性强的网页。在jquery中添加和删除样式也是一项常见的任务，下面将介绍如何使用jquery实现点击添加和删除样式。
首先，我们需要使用HTML和CSS创建一个简单的样式列表。在HTML中，我们可以使用ul和li标签创建一个简单的无序列表，代码如下：
<ul class="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
接着，在CSS中，我们可以为列表项指定样式，以便在添加和删除样式时使用。代码如下：
.myList li{
padding:10px;
border:1px solid black;
cursor:pointer;
}
.myList li.selected{
background-color:gray;
color:white;
}现在，在JavaScript文件中，我们可以使用jQuery来实现添加和删除样式。首先，我们需要使用jQuery选择器找到所有列表项，并使用click()函数向它们添加单击事件，代码如下：
$(document).ready(function(){
$('.myList li').click(function(){
//代码将在此处添加
});
});在单击事件中，我们可以使用toggleClass()函数来添加或删除.selected类，即已经在CSS中定义了的样式。代码如下：
$(document).ready(function(){
$('.myList li').click(function(){
$(this).toggleClass('selected');
});
});现在，当单击列表项时，它们将切换被选中状态的样式。如果已经被选中，则将其取消选择，反之亦然。可以在线采用此示例：https://codepen.io/alenaofficial/pen/zYGOYap
添加和删除样式就是这么简单，使用jQuery，我们可以轻松地实现动态样式变化，从而提升用户体验。
以上就是jquery点击添加删除样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
276
