时间戳

首页 > 解决方案 > 如何在 JavaScript 中更改添加和删除活动类

javascript - 如何在 JavaScript 中更改添加和删除活动类

问题描述

我有导航栏，我想在其中添加活动类并将其从以前的单击列表中删除我认为这是一件基本的事情，但我是 javascript 的新手，所以我无法找出解决方案。我有有效的代码，但最后一个和第一个列表没有删除。

代码

<div id="icon-layout">
      <ul>
         <li>CLOTHING</li>
         <li>BAGS</li>
         <li>SHOES</li>
         <li>ACCESSORIES</li>
         <li>BEAUTY</li>
         <li>ABOUT US</li>
         <li>SERVICE</li>
      </ul>
    </div>

CSS

#icon-layout .active{
  background-color: #FF4136;
  color: white;
}

JAVASCRIPT

var activeclass = document.querySelectorAll('#icon-layout li');
   for (var i = 0; i < activeclass.length; i++) {
    activeclass[i].addEventListener('click', activateClass);
   }
function activateClass(e) {
    var previous = e.target.previousElementSibling;
    var next = e.target.nextElementSibling;
    e.target.classList.add('active');
    previous.classList.remove('active');
    next.classList.remove('active');
}

标签： javascriptjqueryhtmlcss

解决方案

var activeclass = document.querySelectorAll('#icon-layout li');
   for (var i = 0; i < activeclass.length; i++) {
    activeclass[i].addEventListener('click', activateClass);
   }
function activateClass(e) {
    for (var i = 0; i < activeclass.length; i++) {
        activeclass[i].classList.remove('active');
    }
    e.target.classList.add('active');
}

您可以在添加一个之前遍历所有元素并删除类

推荐阅读