1. 理解问题背景与需求
在实际开发中，为列表项（<li>）设置选中和未选中状态的样式是一个常见的需求。这可以通过多种方式实现，包括纯 CSS 方法以及 JavaScript 方法。以下是逐步分析的过程：
- 视觉效果区分： 用户需要通过颜色、边框或其他样式变化来感知某个列表项是否被选中。
- CSS 实现： 利用隐藏复选框结合伪类
:checked，可以触发特定的样式规则。 - JavaScript 实现： 通过动态添加或移除类名（如
.active），可以更灵活地控制选中状态。
接下来我们将分别探讨纯 CSS 和 JavaScript 的实现方式。
2. 纯 CSS 实现点击切换背景颜色
以下是一个基于纯 CSS 的解决方案，利用隐藏的复选框和兄弟选择器实现点击切换背景颜色的功能。
| HTML 结构 | CSS 样式 |
|---|
<ul class="list">
<li><input type="checkbox" id="item1" hidden /><label for="item1">Item 1</label></li>
<li><input type="checkbox" id="item2" hidden /><label for="item2">Item 2</label></li>
</ul>
|
.list li {
padding: 10px;
background-color: #f9f9f9;
cursor: pointer;
}
.list input[type="checkbox"]:checked + label {
background-color: #4caf50;
color: white;
}
|
在这个例子中，我们使用了隐藏的复选框和 :checked 伪类，当用户点击标签时，对应的复选框会被选中，从而触发样式变化。
3. 使用 JavaScript 动态切换类名
如果需要更复杂的交互逻辑（例如单选或多选场景），可以借助 JavaScript 来实现。以下是具体的代码示例：
// HTML
// JavaScript
document.querySelectorAll('.list-js .item').forEach(item => {
item.addEventListener('click', () => {
// 移除所有已选中的状态
document.querySelectorAll('.list-js .item.active').forEach(el => el.classList.remove('active'));
// 添加当前选中的状态
item.classList.add('active');
});
});
// CSS
.list-js .item {
padding: 10px;
background-color: #f9f9f9;
cursor: pointer;
}
.list-js .item.active {
background-color: #2196f3;
color: white;
}
此方法通过监听点击事件，动态添加或移除 .active 类名，以实现选中状态的切换。
4. 比较两种方法的优缺点
为了更好地选择合适的实现方式，我们可以从兼容性、复杂性和可维护性等方面进行对比：
- 纯 CSS 方法： 更加简洁，无需额外的脚本支持，但在多选或复杂逻辑场景下可能不够灵活。
- JavaScript 方法： 提供更高的灵活性，适用于单选、多选以及其他复杂交互场景，但需要确保浏览器支持 JavaScript。
以下是两种方法的适用场景总结：
5. 流程图：实现步骤概述
以下是一个简单的流程图，描述了如何实现列表项的选中状态切换：
graph TD
A[开始] --> B{选择实现方式}
B --纯 CSS--> C[添加隐藏复选框]
B --JavaScript--> D[绑定点击事件]
C --> E[定义 :checked 样式]
D --> F[动态切换类名]
E --> G[完成]
F --> H[完成]
