在前端页面开发中，动态管理元素的选中状态是非常常见的需求，比如导航菜单的高亮切换、商品列表的勾选操作、选项卡的内容切换等场景都需要用到相关技术。通过jQuery处理用户交互事件，配合CSS定义不同状态下的样式，能够快速实现稳定且易维护的选中状态管理逻辑。
核心实现原理
动态管理元素选中状态的核心逻辑分为两个部分，一是通过CSS定义选中状态对应的样式，二是通过jQuery监听用户的点击等交互事件，动态为元素添加或移除对应的选中类。
CSS样式定义
首先需要在CSS中定义基础样式和选中状态下的样式，通常我们会给选中状态定义一个专属的类名，比如active，这样便于jQuery操作和样式复用。
/* 定义列表项基础样式 */
.list-item {
padding: 12px 16px;
margin: 8px 0;
border: 1px solid #e0e0e0;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
/* 定义选中状态样式 */
.list-item.active {
background-color: #1890ff;
color: #ffffff;
border-color: #1890ff;
}
jQuery事件处理
接下来使用jQuery监听元素的点击事件，在点击时切换选中类。如果是单选场景，需要先移除其他元素的选中类，再给当前点击的元素添加选中类；如果是多选场景，则直接切换当前元素的选中类即可。
常见场景实现示例
场景一：单选列表项选中
单选场景下，同一时间只能有一个元素处于选中状态，实现代码如下：
<ul class="item-list">
<li class="list-item">选项一</li>
<li class="list-item">选项二</li>
<li class="list-item">选项三</li>
<li class="list-item">选项四</li>
</ul>
对应的jQuery逻辑：
$(function() {
// 监听列表项点击事件
$('.list-item').on('click', function() {
// 移除所有列表项的active类
$('.list-item').removeClass('active');
// 给当前点击的列表项添加active类
$(this).addClass('active');
});
});
场景二：多选元素选中
多选场景下，每个元素的选中状态相互独立，点击时切换自身的选中状态即可：
<div class="tag-list">
<span class="tag-item">标签一</span>
<span class="tag-item">标签二</span>
<span class="tag-item">标签三</span>
<span class="tag-item">标签四</span>
</div>
对应的CSS和jQuery逻辑：
.tag-item {
display: inline-block;
padding: 6px 12px;
margin: 4px;
border: 1px solid #d9d9d9;
border-radius: 12px;
cursor: pointer;
}
.tag-item.active {
background-color: #f0f9eb;
color: #67c23a;
border-color: #67c23a;
}
$(function() {
$('.tag-item').on('click', function() {
// 切换当前元素的active类
$(this).toggleClass('active');
});
});
注意事项
- 类名定义要统一，避免出现多个不同的选中类名导致样式和逻辑混乱。
- 如果页面中存在动态添加的元素，需要使用事件委托的方式绑定事件，否则新添加的元素无法触发选中逻辑。
- 样式过渡效果可以提升用户体验，建议给状态切换添加合适的transition属性。
事件委托的实现示例，针对动态添加的列表项：
$(function() {
// 事件委托，监听父元素的点击事件，匹配子元素
$('.item-list').on('click', '.list-item', function() {
$('.list-item').removeClass('active');
$(this).addClass('active');
});
// 动态添加列表项
$('#add-btn').on('click', function() {
$('.item-list').append('<li class="list-item">新增选项</li>');
});
});