I am currently implementing the w3schools HOW TO - tabs feature on my website to create tabbed navigation. However, I'm running into an issue where clicking on tabs other than 'Home' still displays the 'Home' content along with the content of the selected tab. How can I hide the 'Home' div when switching to another tab so that only the content of the active tab is visible?
Here is the HTML code for my navigation menu and the JavaScript function I am using:
<script type="text/javascript" >
function openTab(evt, tabName) {
// Define variables
var i, tabcontent, tablinks;
// Hide all elements with class "tabcontent"
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove the "active" class from all elements with class "tablinks"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab and add the "active" class to the selected link
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<script type="text/javascript">
</script><nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Ben and Lukes</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#intro" class="tablinks active" onclick="openTab(event, 'intro')">Home</a></li>
<li><a href="#About" class="tablinks" onclick="openTab(event, 'About')">About Us</a></li>
<li><a href="#Products" class="tablinks" onclick="openTab(event, 'Products')">Products</a></li>
<li><a href="#Contact" class="tablinks" onclick="openTab(event, 'Contact')">Contact Us</a></li>
</ul>
</div>
</nav>