0

Quiero quitar la clase active a los elementos en los que no se hicieron clic, estoy agregando la clase active cuando se da clic en cada elemento.

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>

2
  • Cuál es el error?
    – Bicho
    Commented el 10 mar. 2020 a las 20:48
  • @Bicho Lo mencione en la pregunta, quitar la clase active a los elementos en los que no se hicieron clic
    – qwerty
    Commented el 10 mar. 2020 a las 20:49

1 respuesta 1

0

Lo que te esta faltando es quitar la clase active antes de asignar esta al nuevo elemento "clic-eado"

Ejemplo:

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.