title: How to keep menu item highlighted when in that view?
body: <p>I want the menu item to be highlighted of the current view that we're in.  As of now, <code>Item 2</code> is hardcoded to be active and color yellow because that's the view the user will land on upon loading the website.</p>
  
  <p>If the user wants to go to <code>Item 3</code>, then <code>Item 3</code> should be yellow while <code>Item 1</code> and <code>Item 2</code> remain in their normal color state. </p>
  
  <p>In the console, I'm getting <code>Uncaught TypeError: a.getElementsByClassName is not a function</code> which really didn't make sense to me but I guess this is where the problem stems from?</p>
  
  <p>I've ran through so many examples online and tried many different suggestions but none of them seem to work.  What's wrong with my code and how can I fix it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function () {
      console.log("inside function");
  
      let a = document.getElementsByTagName('a');
      let b = a.getElementsByClassName("active");
      for (let i = 0; i &lt; b.length; i++) {
          b[i].addEventListener("click", function() {
              let current = document.getElementsByClassName("active");
              current[0].className = current[0].className.replace(" active", "");
              this.className += " active";
          });
      }
  }());</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a.active {
        background-color: #ffff00;
        font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="mobile-nav container"&gt;
    &lt;div class="collapse navbar-collapse" id="user-navbar-collapse-1"&gt;
  
        &lt;ul class="nav navbar-nav navbar-right"&gt;
  
            &lt;li&gt;
                &lt;a href="#"&gt;Item 1&lt;/a&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
                &lt;a href="#" class="active"&gt;Item 2&lt;/a&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
                &lt;a href="#"&gt;Item 3&lt;/a&gt;
            &lt;/li&gt;
  
        &lt;/ul&gt;
  
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>