I created a webpage featuring a navbar with three elements: Products, Partners, and Support. To streamline my code and avoid repetition, I moved this navbar to a separate file named navbar.html and utilized load-navbar.js to call it. Is there a way to use JavaScript to indicate which navbar item is currently active? Can switch statements be employed for this purpose, and if so, how can they be implemented?
navbar.html
<nav class="navbar navbar-default mc-header navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="../index.html"><img id="logo" src="images/logo.svg" alt="Company Logo"></a>
</div>
<div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing">
<ul class="nav navbar-nav navbar-right" >
<li><a class="mc-active" href="Items/products.html">Products</a></li>
<li><a href="partners.html">Partners</a></li>
<li><a href="support.html">Support</a></li>
</ul>
</div>
</nav>
load-navbar.js
$(function(){
$("#main-nav").load("main-nav.html");
});
The addition of the mc-active class in products indicates that products.html is currently the active page.