He creado algunas pestañas en las que se puede hacer clic, pero por alguna razón el contenido de la pestaña no se muestra al hacer clic. No puedo ver nada fuera de lugar con mi código. Cualquier idea sería muy apreciada. Gracias.
<div className="container-tabs"> <ul className="tablist"> <li data-tab-target="engage" className="active-tab tab">01</li> <li data-tab-target="scope" className="tab">02</li> <li data-tab-target="build" className="tab">03</li> </ul> <div className="tab-content py"> <div id="engage" data-tab-content className="active-tab"> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus aperiam repudiandae animi rerum quae porro molestias placeat iure nostrum doloribus. </p> </div> <div id="scope" data-tab-content> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sit iste, veritatis iusto nulla delectus voluptatibus neque. Tenetur, aperiam itaque. </p> </div> <div id="build" data-tab-content> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut quas nulla, necessitatibus expedita illum in numquam omnis tempora illo consequuntur. </p> </div> </div> </div> const tabs = document.querySelectorAll('[data-tab-target]'); const tabContents = document.querySelectorAll('[data-tab-content]'); tabs.forEach(tab => { tab.addEventListener('click', () => { const target = document.querySelector(tab.dataset.tabTarget) tabContents.forEach(tabContents => { tabContents.classList.remove('active-tab') }) tabs.forEach(tab => { tab.classList.remove('active-tab') }) tab.classList.add('active-tab') target.classList.add('active-tab') }) });puede mantener una variable con la pestaña seleccionada e ir desde allí, también es mejor tener solo un oyente en su lista de pestañas, establecería una identificación en <ul class="tablist"> para una selección más rápida... algo como esto:
const tabs = document.getElementById("tablist"); let selected = document.querySelectorAll("[data-tab-target]")[0]; const tabContents = document.querySelectorAll("[data-tab-content]"); let selectedContent = tabContents[0]; tabs.addEventListener("click", (e) => { selected.classList.remove("active-tab"); selected = e.target; selected.classList.toggle("active-tab"); const index = [...selected.parentNode.children].indexOf(selected); selectedContent.classList.remove("active-tab"); selectedContent = tabContents[index]; selectedContent.classList.toggle("active-tab"); }); .active-tab { color: red; } <div class="container-tabs"> <ul class="tablist" id="tablist"> <li data-tab-target="engage" class="active-tab tab">01</li> <li data-tab-target="scope" class="tab">02</li> <li data-tab-target="build" class="tab">03</li> </ul> <div class="tab-content py"> <div id="engage" data-tab-content class="active-tab"> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus aperiam repudiandae animi rerum quae porro molestias placeat iure nostrum doloribus. </p> </div> <div id="scope" data-tab-content> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sit iste, veritatis iusto nulla delectus voluptatibus neque. Tenetur, aperiam itaque. </p> </div> <div id="build" data-tab-content> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut quas nulla, necessitatibus expedita illum in numquam omnis tempora illo consequuntur. </p> </div> </div>