title: Using javascript to manage navbar
body: <p>I have a webpage with 3 items in the navbar; Products, Partners and Support. I have moved this navbar to a seperate .html file; navbar.html and called it using load-navbar.js. I have done this to avoid code repetition. Is it possible to use javascript to show which navbar item is active? Is it possible to use switch statements to do this. If yes, how can I do this?</p>
  
  <p><strong><em>navbar.html</em></strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-default mc-header navbar-static-top"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a href="../index.html"&gt;&lt;img id="logo" src="images/logo.svg" alt="Company Logo"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing"&gt;
          &lt;ul class="nav navbar-nav navbar-right" &gt;
              &lt;li&gt;&lt;a class="mc-active" href="Items/products.html"&gt;Products&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="partners.html"&gt;Partners&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="support.html"&gt;Support&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong><em>load-navbar.js</em></strong></p>
  
  <pre><code>$(function(){
      $("#main-nav").load("main-nav.html");
  });
  </code></pre>
  
  <p>The mc-active class in products is added to the class to show that products.html is the active class.</p>