Home / Questions / 336080
Accepted
qwerty
Asked: 2020-03-11 12:44:51 +0800 CST 2020-03-11 12:44:51 +0800 CST

Remove class to elements

  • 772

I want to remove the class activeto the elements that were not clicked, I am adding the class activewhen each element is clicked.

const tabs = document.querySelectorAll('.tab')
const slider = document.querySelector('.slider')

tabs.forEach((tab, i) => {
  tab.addEventListener('click', () => {
    let styles = `left: ${tab.offsetLeft}px;
       width: ${tab.offsetWidth}px;`;

    slider.style.cssText = styles
    tab.classList.add('active');
  })
})
body {
  display: flex;
  justify-content: center;
}

.tabs-container {
  position: relative;
  display: flex;
  margin-top: 55px;
  height: 35px
}

.tab {
  margin: 0px 20px;
  text-transform: capitalize;
  font-weight: bold;
  font-family: arial;
  font-size: .9em;
  cursor: pointer;
}

.tab.active {
  color: red;
}

.slider {
  background-color: red;
  height: 5px;
  width: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 300ms left ease-in-out, 300ms width ease-in-out
}
<div class="tabs-container">
  <div class="tab active" data-tab="general">general</div>
  <div class="tab" data-tab="business">business</div>
  <div class="tab" data-tab="technology">technology</div>
  <div class="tab" data-tab="health">health</div>
  <div class="slider"></div>
</div>

javascript

1 Answers

  1. Best Answer

    What you are missing is removing the class activebefore assigning it to the new "clicked" element.

    Example:

    const tabs = document.querySelectorAll('.tab')
const slider = document.querySelector('.slider')

tabs.forEach((tab, i) => {
  tab.addEventListener('click', () => {
    let styles = `left: ${tab.offsetLeft}px;
       width: ${tab.offsetWidth}px;`;
    slider.style.cssText = styles;
    
    // ACA Quitamos la class "active" primero
    tabs.forEach(t => t.classList.remove('active'));
    
    //
    tab.classList.add('active');
  })
})
    body {
  display: flex;
  justify-content: center;
}

.tabs-container {
  position: relative;
  display: flex;
  margin-top: 55px;
  height: 35px
}

.tab {
  margin: 0px 20px;
  text-transform: capitalize;
  font-weight: bold;
  font-family: arial;
  font-size: .9em;
  cursor: pointer;
}

.tab.active {
  color: red;
}

.slider {
  background-color: red;
  height: 5px;
  width: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 300ms left ease-in-out, 300ms width ease-in-out
}
    <div class="tabs-container">
  <div class="tab active" data-tab="general">general</div>
  <div class="tab" data-tab="business">business</div>
  <div class="tab" data-tab="technology">technology</div>
  <div class="tab" data-tab="health">health</div>
  <div class="slider"></div>
</div>

    • 0