当前位置：首页 > JavaScript

js实现active

2026-04-06 07:20:42JavaScript

JavaScript 实现 Active 状态的方法

在 JavaScript 中实现元素的 active 状态通常涉及监听用户交互事件（如点击或触摸），并动态修改元素的样式或类名。以下是几种常见的方法：

使用 classList 切换类名

通过 classList.add() 和 classList.remove() 动态添加或移除 active 类：

const element = document.querySelector('.target-element');
element.addEventListener('click', function() {
  this.classList.toggle('active');
});

CSS 中需预先定义 .active 的样式：

.active {
  background-color: #007bff;
  color: white;
}

通过事件委托批量处理

对于动态生成的元素或多个同类元素，使用事件委托优化性能：

document.addEventListener('click', function(e) {
  if (e.target.matches('.item')) {
    document.querySelectorAll('.item').forEach(el => el.classList.remove('active'));
    e.target.classList.add('active');
  }
});

数据驱动状态管理

结合现代前端框架（如 Vue/React）时，通常通过数据绑定控制状态：

// Vue 示例
new Vue({
  data: { activeIndex: null },
  methods: {
    setActive(index) {
      this.activeIndex = index;
    }
  }
});

// React 示例
function List() {
  const [activeId, setActiveId] = useState(null);
  return items.map(item => (
    <div 
      className={item.id === activeId ? 'active' : ''}
      onClick={() => setActiveId(item.id)}
    />
  ));
}

键盘交互支持

为增强可访问性，需支持键盘操作：

js实现active

element.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    element.classList.add('active');
  }
});