Estoy aprendiendo JavaScript y vi un video sobre cómo crear pestañas usando HTML, CSS y JavaScript. Pero no entiendo cómo funciona el código. Este es un codepen del código: Tabs Codepen by WebDevSimplified . Para ser más específico, no entiendo cuál será el valor de target en esta línea const target = document.querySelector(tab.dataset.tabTarget); . ¿Toma los valores #home , #pricing y #about de data-tab-target y aplica la clase active en el data-tab-content específico en función de qué data-tab-target hace clic en el usuario?
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(tabContent => { tabContent.classList.remove('active'); }) tabs.forEach(tab => { tab.classList.remove('active'); }) tab.classList.add('active'); target.classList.add('active'); }) }) [data-tab-content] { display: none; } .active[data-tab-content] { display: block; } body { padding: 0; margin: 0; } .tabs { display: flex; justify-content: space-around; list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid black; } .tab { cursor: pointer; padding: 10px; } .tab.active { background-color: #CCC; } .tab:hover { background-color: #AAA; } .tab-content { margin-left: 20px; margin-right: 20px; } <ul class="tabs"> <li data-tab-target="#home" class="active tab">Home</li> <li data-tab-target="#pricing" class="tab">Pricing</li> </ul> <div class="tab-content"> <div id="home" data-tab-content class="active"> <h1>Home</h1> <p>This is the home</p> </div> <div id="pricing" data-tab-content> <h1>Pricing</h1> <p>Some information on pricing</p> </div> </div>