js实现active
实现 active 效果的 JavaScript 方法
使用 JavaScript 实现 active 效果可以通过动态添加和移除 CSS 类来完成。以下是几种常见的方法：
方法一：通过事件监听器切换类
为元素添加事件监听器，在触发事件时切换 active 类：
const element = document.querySelector('.target-element');
element.addEventListener('click', function() {
this.classList.toggle('active');
});方法二：移除其他元素的 active 类
在导航菜单等场景中，可能需要确保只有一个元素保持 active 状态：
const items = document.querySelectorAll('.menu-item');
items.forEach(item => {
item.addEventListener('click', function() {
items.forEach(i => i.classList.remove('active'));
this.classList.add('active');
});
});方法三：使用事件委托
对于动态生成的元素，可以使用事件委托：
document.addEventListener('click', function(e) {
if (e.target.matches('.clickable-item')) {
document.querySelectorAll('.clickable-item').forEach(el => {
el.classList.remove('active');
});
e.target.classList.add('active');
}
});CSS 样式配合
确保 CSS 中定义了 active 类的样式：
.active {
background-color: #4CAF50;
color: white;
/* 其他样式 */
}注意事项
- 确保 JavaScript 在 DOM 加载完成后执行，可以将代码放在
DOMContentLoaded事件中或放在 body 末尾 - 对于复杂的交互，可以考虑使用状态管理或框架（如 React、Vue）
- 在移动设备上，可能需要同时处理
touchstart和click事件
性能优化
对于大量元素，使用事件委托比单独绑定事件更高效。避免在频繁触发的事件（如 scroll）中使用类切换操作。
