Estoy trabajando con HTML y JS y estoy tratando de agregar un detector de eventos de clic para que el valor del index = 0 se actualice automáticamente al hacer clic.
Según el elemento .tab en el que haga clic, el contenido dentro de div.tab debería cambiar para mostrar Hello1 , Hello2 o Hello3 . La primera pestaña debe mostrar el contenido de la pestaña hello1 en consecuencia.
He proporcionado ambos atributos de datos en el HTML. Quiero que se emita el contenido de div.tab correspondiente si ambos tienen el mismo atributo de datos con Vanilla JS.
JS
const tabbarContent = document.querySelectorAll(".tab-content"); const tabbarButtons = document.querySelectorAll(".tab"); const index = 0; tabbarContent[index].classList.add('active'); tabbarButtons[index].classList.add('active'); const dataAttribute1 = tabbarButtons[index].getAttribute("data-tab"); const dataAttribute2 = tabbarContent[index].getAttribute("data-tab"); function clickTab() { for (let index = 0; index.length; index++) { if (dataAttribute1[index] === dataAttribute2[index]) { dataAttribute2.classList.add("active"); } } } tabbarButtons[index].addEventListener("click", clickTab);HTML
<div class="container"> <div class="inner-container"> <div class="tab tab1" data-tab="1"> 1 </div> <div class="tab tab2" data-tab="2"> 2 </div> <div class="tab tab3" data-tab="3"> 3 </div> </div> <div class="inner-container"> <div class="tab-content content1" data-tab="1"> <h1>Hello1</h1> </div> <div class="tab-content content2" data-tab="2"> <h1>Hello2</h1> </div> <div class="tab-content content3" data-tab="3"> <h1>Hello3</h1> </div> </div> </div>Gracias Jessy
Si entiendo correctamente lo que quiere lograr, podría hacer algo como:
const tabbarButtons = document.querySelectorAll(".tab"); const tabbarContents = document.querySelectorAll(".tab-content"); tabbarButtons.forEach((tabBtn) => { tabBtn.addEventListener('click', () => { tabbarContents.forEach(tabCnt => { if (tabCnt.dataset.tab === tabBtn.dataset.tab) { tabCnt.classList.add('active'); } else { tabCnt.classList.remove('active'); } }) }); }) .tab { display: inline-block; padding: 5px; border: 1px solid #ccc; } .tab-content { display: none; } .tab-content.active { display: block; } <div class="container"> <div class="inner-container"> <div class="tab tab1" data-tab="1"> 1 </div> <div class="tab tab2" data-tab="2"> 2 </div> <div class="tab tab3" data-tab="3"> 3 </div> </div> <div class="inner-container"> <div class="tab-content content1" data-tab="1"> <h1>Hello1</h1> </div> <div class="tab-content content2" data-tab="2"> <h1>Hello2</h1> </div> <div class="tab-content content3" data-tab="3"> <h1>Hello3</h1> </div> </div> </div>