时间戳

首页 > 解决方案 > 使用 setTimeout将类添加到一个标签

javascript - 使用 setTimeout将类添加到一个标签

问题描述

标签： javascriptcss

解决方案

首先隐藏所有图标，然后手动将active-icon类添加到其中一个。

.iconDisp { display: none; }
.active-icon { display: block; }

在您的 JavaScript 中，您必须为每个图标添加一个事件侦听器，以便在单击时更改活动选项卡。在此侦听器中，您检查当前单击不是活动选项卡，如果它不是活动选项卡，active-icon则从当前活动选项卡中删除该类并将其更改为新的活动图标。像这样：

const icons = document.querySelectorAll('.icons i');
icons.forEach((icon) => {
  icon.addEventListener('click', (event) => {
    if(!icon.classList.contains('active-icon') {
      setTimeout(() => {
        const currentActiveIcon = document.querySelector('.active-icon');
        currentActiveIcon.classList.remove('active-icon');
        icon.classList.add('active-icon');
      }, 1000); // happens after 1 second
    }
  })
})

此代码未经测试并从内存中编写，但应该可以工作。

推荐阅读