I am learning JavaScript and I saw a video about creating tabs using HTML, CSS, and JavaScript. But I am not understanding how the code is working. This is a codepen of the code: Tabs Codepen by WebDevSimplified. To be more specific I am not understanding what the value of target will be in this line const target = document.querySelector(tab.dataset.tabTarget);. Is it taking the values #home, #pricing and #about from data-tab-target and applying the class active on the specific data-tab-content based on which data-tab-target the user clicks on?
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>