一、html 结构
首先，我们需要在 html 中添加一些列表元素，用于演示选中项变颜色的效果。以下是一个简单的 html 结构：
<!doctype html><html><head> <title>选中项变颜色</title> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> .selected { background-color: #f5f5dc; } </style></head><body> <ul id="list"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> </ul></body></html>
这里定义了一个 ul 元素，其中包含四个 li 元素。当用户点击其中的一个 li 元素时，我们将该元素设置为选中状态，并改变它的背景颜色。
二、jquery 实现选中项变颜色
接下来，我们需要使用 jquery 在用户点击列表项时实现变色效果。以下是具体步骤：
通过 jquery 选择器获取所有的 li 元素，并给它们绑定 click 事件。$(document).ready(function(){ $("#list li").click(function(){ // todo: 点击事件处理逻辑 });});
对于每个被点击的 li 元素，我们需要添加一个 css 类 selected，并移除其他所有列表项的 selected 类。$("#list li").click(function(){ // 添加选中状态 $(this).addclass('selected'); // 移除其他元素的选中状态 $(this).siblings().removeclass('selected');});
最后，为选中项的背景颜色添加样式即可：.selected { background-color: #f5f5dc;}
完整的 jquery 代码如下：
$(document).ready(function(){ $("#list li").click(function(){ // 添加选中状态 $(this).addclass('selected'); // 移除其他元素的选中状态 $(this).siblings().removeclass('selected'); });});
三、效果预览
最终实现的效果如下图所示：
四、总结
本文介绍了如何使用 jquery 实现选中项变颜色的功能。通过本文的学习，你已经了解了如何通过 jquery 访问 dom 元素、添加和删除 css 类，并实时更新页面。希望这篇文章能够帮助你学习 jquery，提高 web 开发效率。
以上就是jquery实现选中项变颜色的详细内容。