¿Cómo agrego una clase activa a div mientras class="btn-buy2 gecmis" está activo?
Quiero agregar a <div class="my-head-right-item1">
<div class="contact-box2 mb-4"> <div class="my-meeting-toptitle align-items-center"> <div class="my-meeting-head-left"> <a href="#anlik" class="btn-buy2 active">Anlık</a> <a href="#gecmis" class="btn-buy2 gecmis">Geçmiş</a> <a href="#kisisel" class="btn-buy2">Kişisel Oda</a> </div> <div class="my-meeting-head-right"> <div class="my-head-right-item1"> Takvimi Görüntüle </div> </div> </div> </div>Para agregar una clase a un div que contenga las clases btn-buy2 y gecmis, puede hacerlo
let elements = document.querySelectorAll('.btn-buy2').filter(item => return item.classList.indexOf('gecmis') > -1); elements.forEach(el => el.classList.add('your-class-name-here'));Espero que eso responda a tu pregunta.
Aquí agrego activo usando un eventListener y alterno activo en el otro div si gecmis está activo
document.querySelector(".contact-box2").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("btn-buy2")) { tgt.closest("div").querySelectorAll(".btn-buy2") .forEach(btn => btn.classList.remove("active")); // remove active from siblings tgt.classList.add("active"); tgt.closest(".my-meeting-toptitle") .querySelector(".my-head-right-item1") .classList.toggle("active", tgt.classList.contains("gecmis") && tgt.classList.contains("active") ); } }) .active { background-color: yellow; } <div class="contact-box2 mb-4"> <div class="my-meeting-toptitle align-items-center"> <div class="my-meeting-head-left"> <a href="#anlik" class="btn-buy2 active">Anlık</a> <a href="#gecmis" class="btn-buy2 gecmis">Geçmiş</a> <a href="#kisisel" class="btn-buy2">Kişisel Oda</a> </div> <div class="my-meeting-head-right"> <div class="my-head-right-item1"> Takvimi Görüntüle </div> </div> </div> </div>