I'm currently working on a menu design project where I need to highlight the active tab/page that the user is on by adding a color class and utilizing JavaScript to update the active link. Here's a snippet of my template:
<div class="menu-container">
<button
class="menu-item active-tab"
onclick="activateTab(event,'Home')"
>
Home
</button>
<button
class="menu-item"
onclick="activateTab(event,'About')"
>
About
</button>
<button
class="menu-item"
onclick="activateTab(event,'Contact')"
>
Contact
</button>
</div>
<div id="Home" class="tab-content active-tab">
<h2>Home</h2>
<p>This is the homepage.</p>
</div>
<div id="About" class="tab-content" style="display:none">
<h2>About</h2>
<p>Learn more about us here.</p>
</div>
<div id="Contact" class="tab-content" style="display:none">
<h2>Contact</h2>
<p>Reach out to us for any queries.</p>
</div>
Additionally, I've included the following JavaScript code in my 'methods':
methods: {
activateTab: function(evt, tabName) {
var i, tabs, tabLinks;
tabs = document.getElementsByClassName("tab-content");
for (i = 0; i < tabs.length; i++) {
tabs[i].style.display = "none";
}
tabLinks = document.getElementsByClassName("menu-item");
for (i = 0; i < tabLinks.length; i++) {
tabLinks[i].classList.remove('active-tab');
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.classList.add('active-tab');
}
}
However, I encountered an error in console saying 'TypeError: Cannot read property 'className' of undefined' and the button doesn't get highlighted as intended. I would appreciate any help or suggestions you can provide. Thank you!