title: jQuery onclick event for <a> tag to change 'active' class
body: <p>I've seen a few posts about this but none have worked for me. Also, I think my problem has to do with the way I'm adding an html 'template' with jQuery. I think this might have to do with the scope but I'm not sure. I'm still a rookie in Web Design.</p>
  
  <p>I'm using the '.active' class from bootstrap and I want to switch that class between the navigation buttons.
  First I tried to do it following the instructions on these videos and finally from a few different SO posts.</p>
  
  <p><strong><em>jQuery Tutorial: Add Active Class to Navigation Menu Item Based on URL</em></strong></p>
  
  <ul>
  <li><a href="https://www.youtube.com/watch?v=Z9lCqK_VrEE" rel="nofollow noreferrer">https://www.youtube.com/watch?v=Z9lCqK_VrEE</a></li>
  </ul>
  
  <p><strong><em>Nav Menu Active Click Item with jQuery</em></strong></p>
  
  <ul>
  <li><a href="https://www.youtube.com/watch?v=KaWvfxUdz_k" rel="nofollow noreferrer">https://www.youtube.com/watch?v=KaWvfxUdz_k</a></li>
  </ul>
  
  <p>This is the code I currently have.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
  
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"&gt;
        &lt;link rel="stylesheet" href="../stylesheets/header.css"&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="/javascript/header.js"&gt;&lt;/script&gt;
  
        &lt;title&gt;MNRentals | Dashboard&lt;/title&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
        &lt;div id="header"&gt;&lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>reservations.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
  
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="../stylesheets/header.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/javascript/header.js"&gt;&lt;/script&gt;
          &lt;title&gt; MNRentals | Reservations&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="header"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>header.html</strong></p>
  
  <pre><code>&lt;!-- HEADER --&gt;
  &lt;header class="main-header"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="logo"&gt;
                  &lt;span class="logo-lg"&gt;&lt;b&gt;MN&lt;/b&gt;Rentals&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="float-right"&gt;
                  &lt;ul class="nav nav-pills card-header-pills"&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link active" href="index.html"&gt;Dashboard&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="reservations.html"&gt;Reservations&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;Pagos&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;Propiedades&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;header&gt;
  </code></pre>
  
  
  
  <p><strong>header.js</strong></p>
  
  <pre><code>(function ($) {
      $(document);
  }(jQuery));
  
  $(function () {
      $('#header').load('/pages/header.html');
  });
  
  $(document).ready(function() {
      $('.nav a').click(function () {
          $('.nav a.active').removeClass('active');
          $(this).addClass('active');
      });
  });
  </code></pre>