Como alterar o estilo do elemento clicado e do elemento atual?

Sep 24 2020

Quero alterar a classe do elemento clicado e remover a classe do elemento "atual". Meu código atual funciona bem, mas estou procurando uma maneira mais limpa / automática. Então, estou procurando uma maneira de dizer algo como: remova a classe de todos os elementos existentes e adicione-a ao clicado (este).

Minha atual code:

 document.getElementById('hotelgids-tab-1').addEventListener('click', showForm1);
 document.getElementById('hotelgids-tab-2').addEventListener('click', showForm2);
 document.getElementById('hotelgids-tab-3').addEventListener('click', showForm3);
 document.getElementById('hotelgids-tab-4').addEventListener('click', showForm4);
 
 function showForm1(){
    this.classList.add('activetab');
    document.getElementById('hotelgids-tab-2').classList.remove('activetab');
    document.getElementById('hotelgids-tab-3').classList.remove('activetab');
    document.getElementById('hotelgids-tab-4').classList.remove('activetab');
  }
  function showForm2(){
    this.classList.add('activetab');
    document.getElementById('hotelgids-tab-1').classList.remove('activetab');
    document.getElementById('hotelgids-tab-3').classList.remove('activetab');
    document.getElementById('hotelgids-tab-4').classList.remove('activetab');

  }
  function showForm3(){
    this.classList.add('activetab');
    document.getElementById('hotelgids-tab-1').classList.remove('activetab');
    document.getElementById('hotelgids-tab-2').classList.remove('activetab');
    document.getElementById('hotelgids-tab-4').classList.remove('activetab');
  }
  function showForm4(){
    this.classList.add('activetab');
    document.getElementById('hotelgids-tab-2').classList.remove('activetab');
    document.getElementById('hotelgids-tab-3').classList.remove('activetab');
    document.getElementById('hotelgids-tab-1').classList.remove('activetab');
  }

<div style="display:  flex;">
 <div id="hotelgids-tab-1" class="form-tabs-submit activetab width-33">Avro Bode
  </div>
  <div id="hotelgids-tab-2" class="form-tabs-submit width-33">Vara Tros Mikro
  </div>
  <div id="hotelgids-tab-3" class="form-tabs-submit width-33">Avro Kro NCRV
  </div>
  <div id="hotelgids-tab-4" class="form-tabs-submit hotelgids-3">Vara Tros Mikro
  </div>
  </div>

Alguém sabe como fazer isso?

Respostas

2 AlwaysHelping Sep 24 2020 at 12:58

Você codepode simplificada para apenas algumas linhas usando querySelectorAll e forEach método.

Em primeiro lugar, pegue todos os elementos removendo todas as activeTabclasses das guias. Adicione apenas ao elemento clicado usando Event.Target

let getTabs = document.querySelectorAll('.form-tabs-submit')

getTabs.forEach(function(tab) {
  tab.addEventListener('click', function(e) { //attach event Listener
    getTabs.forEach(function(tab) {
      tab.classList.remove('activetab') //remove from all tabs
    })
    e.target.classList.add('activetab') //add Class to clicked tab only
  })
})

Demonstração ao vivo:

let getTabs = document.querySelectorAll('.form-tabs-submit')

getTabs.forEach(function(tab) {
  tab.addEventListener('click', function(e) {
    getTabs.forEach(function(tab) {
      tab.classList.remove('activetab')
    })
    e.target.classList.add('activetab')
  })
})

.form-tabs-submit {
  display: flex;
  background-color: #F5F5F5;
  box-sizing: border-box;
  box-shadow: 0px 1px 3px #0000000F;
  border-radius: 0px;
  color: #707070;
  width: 25%;
  padding: 9px 0px;
  font-size: 16px;
  border: none;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  flex-wrap: wrap;
}

.form-tabs-submit.activetab {
  display: flex;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 1px 3px #00000029;
  border-radius: 0px;
  color: #EC008C;
  border-bottom: 3px solid #EC008C;
  width: 25%;
  padding: 9px 0px;
  font-size: 16px;
}

.form-tabs-submit::first-of-type {
  border-radius: 4px 0px 0px 0px
}

.form-tabs-submit::last-of-type {
  border-radius: 0px 4px 0px 0px;
}

.container {
  display: flex;
}

<div class="container">
  <div id="hotelgids-tab-1" class="form-tabs-submit activetab width-33">Avro Bode
  </div>
  <div id="hotelgids-tab-2" class="form-tabs-submit width-33">Vara Tros Mikro
  </div>
  <div id="hotelgids-tab-3" class="form-tabs-submit width-33">Avro Kro NCRV
  </div>
  <div id="hotelgids-tab-4" class="form-tabs-submit hotelgids-3">Vara Tros Mikro
  </div>
</div>

3 Mamun Sep 24 2020 at 12:57

Você pode otimizar seu código da seguinte maneira:

//Get all the tabs starting id with hotelgids-tab-
var all = document.querySelectorAll('[id^=hotelgids-tab-]');
//Loop through them to attch the click event
all.forEach(el => el.addEventListener('click', showForm));
function showForm(e){
  //Remove class from all
  all.forEach((el) => el.closest('div').classList.remove('activetab'));
  //Add the class to the clicked tab
  e.target.closest('div').classList.add('activetab');
}

.form-tabs-submit {
  display: flex;
  background-color: #F5F5F5;
  box-sizing: border-box;
  box-shadow: 0px 1px 3px #0000000F;
  border-radius:0px;
  color: #707070;
  width: 25%;
  padding: 9px 0px;
  font-size: 16px;
  border: none;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  flex-wrap: wrap;
 }
 .form-tabs-submit.activetab {
  display: flex;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 1px 3px #00000029;
  border-radius:0px;
  color: #EC008C;
  border-bottom: 3px solid #EC008C;
  width: 25%;
  padding: 9px 0px;
  font-size: 16px;
 }

<div style="display:  flex;">
 <div id="hotelgids-tab-1" class="form-tabs-submit activetab width-33">Avro Bode
   <span class="hotelgids-subtitle">Acties geldig t/m 31 oktober</span>
  </div>
  <div id="hotelgids-tab-2" class="form-tabs-submit width-33">Vara Tros Mikro
   <span class="hotelgids-subtitle">Acties geldig t/m 31 december</span>
  </div>
  <div id="hotelgids-tab-3" class="form-tabs-submit width-33">Avro Kro NCRV
   <span class="hotelgids-subtitle">Acties geldig t/m 31 januari</span>
  </div>
  <div id="hotelgids-tab-4" class="form-tabs-submit hotelgids-3">Vara Tros Mikro
   <span class="hotelgids-subtitle">Acties geldig t/m 31 maart</span>
  </div>
</div>

1 Bamak Sep 24 2020 at 12:55

Isso deve fazer o trabalho:

document.getElementsBySelector('.form-tabs-submit').addEventListener('click', activateElement); // Listen to every element by class instead of each one by id

 
function activateElement(currentElement) {
    // Disable all elements
    var allElements = document.querySelectorAll('.form-tabs-submit');
    allElements.forEach(function(element) {
        element.classList.remove('activetab');
    }

    // Activate the current element
    currentElement.classList.add('activetab');
}

ATD Sep 24 2020 at 13:01

Experimente isto:

 document.getElementById('hotelgids-tab-1').addEventListener('click', function(){showMe(this)});
 document.getElementById('hotelgids-tab-2').addEventListener('click', function(){showMe(this)});
 document.getElementById('hotelgids-tab-3').addEventListener('click', function(){showMe(this)});
 document.getElementById('hotelgids-tab-4').addEventListener('click', function(){showMe(this)});
 function showMe(d) {
  let thisDiv = d.id;
  let allItems = document.getElementById("hotelgids").querySelectorAll("div");
  allItems.forEach(function(g) {
    if (g.id == thisDiv) {
      g.classList.remove("inactivetab");
      g.classList.add("activetab");
    } else {
      g.classList.remove("activetab");
      g.classList.add("inactivetab");
    }
  })
 
 }

.form-tabs-submit {
  display: flex;
  background-color: #F5F5F5;
  box-sizing: border-box;
  box-shadow: 0px 1px 3px #0000000F;
  border-radius: 0px;
  color: #707070;
  width: 25%;
  padding: 9px 0px;
  font-size: 16px;
  border: none;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  flex-wrap: wrap;
}

.form-tabs-submit.activetab > span{
  display: flex;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 1px 3px #00000029;
  border-radius: 0px;
  color: #EC008C;
  border-bottom: 3px solid #EC008C;
  width: 25%;
  padding: 9px 0px;
  font-size: 16px;
}

.form-tabs-submit.inactivetab > span{
  display: none;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 1px 3px #00000029;
  border-radius: 0px;
  color: #EC008C;
  border-bottom: 3px solid #EC008C;
  width: 25%;
  padding: 9px 0px;
  font-size: 16px;
}

.form-tabs-submit:first-of-type {
  border-radius: 4px 0px 0px 0px
}

.form-tabs-submit:last-of-type {
  border-radius: 0px 4px 0px 0px;
}

span {display:block}

<div id="hotelgids" style="display:flex;">
 <div id="hotelgids-tab-1" class="form-tabs-submit activetab width-33">Avro Bode
   <span class="hotelgids-subtitle">Acties geldig t/m 31 oktober</span>
  </div>
  <div id="hotelgids-tab-2" class="form-tabs-submit inactivetab width-33">Vara Tros Mikro
   <span class="hotelgids-subtitle">Acties geldig t/m 31 december</span>
  </div>
  <div id="hotelgids-tab-3" class="form-tabs-submit inactivetab width-33">Avro Kro NCRV
   <span class="hotelgids-subtitle">Acties geldig t/m 31 januari</span>
  </div>
  <div id="hotelgids-tab-4" class="form-tabs-submit inactivetab hotelgids-3">Vara Tros Mikro
   <span class="hotelgids-subtitle">Acties geldig t/m 31 maart</span>
  </div>
  </div>

Eu adicionei um id ao div externo para me permitir fazer um loop pelos internos. Eu também adicionei um estilo chamado inactivetabwhich setsdisplay:none