当前位置：首页 > JavaScript

js实现 active

2026-02-01 03:18:41JavaScript

实现 Active 状态的 JavaScript 方法

使用 JavaScript 动态添加或移除元素的 active 类，可以通过事件监听和 DOM 操作完成。以下是几种常见场景的实现方式。

点击切换单个元素的 active 状态

为单个元素添加点击事件，切换其 active 类：

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

点击切换多个元素中的 active 状态

在列表或选项卡中，确保只有一个元素保持 active 状态：

const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', function() {
    items.forEach(i => i.classList.remove('active'));
    this.classList.add('active');
  });
});

通过父元素委托事件

利用事件委托优化性能，适合动态加载的元素：

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

结合 CSS 过渡效果

在 JavaScript 中添加类时，配合 CSS 实现平滑过渡：

.button.active {
  background-color: #4CAF50;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

根据滚动位置设置 active

为导航菜单根据滚动位置自动设置 active 状态：

window.addEventListener('scroll', function() {
  const sections = document.querySelectorAll('section');
  const navLinks = document.querySelectorAll('.nav-link');

  sections.forEach((sec, index) => {
    const rect = sec.getBoundingClientRect();
    if (rect.top <= 100 && rect.bottom >= 100) {
      navLinks.forEach(link => link.classList.remove('active'));
      navLinks[index].classList.add('active');
    }
  });
});