jquery - How to change add and remove active class in JavaScript - Stack Overflow

admin管理员组

文章数量:1401264

I have navigation Bar where I want to add active class and remove it from a previous clicked list I think it's a basic thing but I'm new in javascript so i couldn't figure out the solution. I have code that works but the last and first list does not remove.

HTML CODE

<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');
}

I have navigation Bar where I want to add active class and remove it from a previous clicked list I think it's a basic thing but I'm new in javascript so i couldn't figure out the solution. I have code that works but the last and first list does not remove.

HTML CODE

<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');
}

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Nov 3, 2018 at 20:07 Kinan AlamdarKinan Alamdar 46711 gold badge66 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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');
}

You may loop through all elements and remove class before adding one

Try using JQuery as it would definitely make your task easier:

$('#icon-layout li').on('click', function() {
    $('.icon-layout li.active').removeClass('active');
    $(this).addClass('active');
});

本文标签： jqueryHow to change add and remove active class in JavaScriptStack Overflow