title: How to make <li> remain highlighted when redirected to new page?
body: <p>I'm trying to make call a navigation bar(navbar.html) in to my index.html. Navbar.html has its own css and inside navbar.html is a script that changes the class of <code>&lt;li&gt;</code> when <code>&lt;a&gt;</code> is pressed.</p>
  
  <p>I have managed to make the <code>&lt;li&gt;</code> to change highlight but when I press the <code>&lt;a&gt;</code> does not remain highlighted on the new page.</p>
  
  <p>Index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!--NAVIAGTION BAR--&gt;
      &lt;div id="navbar-placeholder"&gt;
  
  
      &lt;/div&gt;
  
  
      &lt;script&gt;
          $(function(){
              $("#navbar-placeholder").load("Files/navbar.html");
          });
      &lt;/script&gt;
      &lt;!--END OF NAVIGATION BAR--&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>navbar.html</p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/navbar.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  
  &lt;div class="navigation"&gt;
      &lt;ul&gt;
          &lt;li class=""&gt;&lt;a href="work.html"&gt;Work&lt;/a&gt;&lt;/li&gt;
          &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
      $(document).ready(function() {
          $(".navigation li").click(function() {
              $(".navigation li").removeClass("active");
              $(this).addClass("active");
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>navbar.css</p>
  
  <pre><code>.navigation{
      position: fixed;
      top: 0;
      width: 100%;
      background-color:#262126;
      text-align: center;
  }
  
  .navigation ul{
      margin: 0;
  }
  .navigation li{
      display: inline-block;
      padding: 15px 30px;
      margin: 10px 5px 0px 5px;
      text-decoration: none;
      font-size: 20px;
      font-family: 'Open Sans', sans-serif;
  }
  
  .navigation a{
      color: white;
      text-decoration: none;
      text-transform: capitalize;
  }
  
  .navigation li:hover{
      background-color: #F2F2F2;
      transition: 0.4s;
  }
  
  .navigation li:hover a{
      color: black;
  }
  
  .navigation li.active{
      background-color: #F2F2F2;
  }
  .navigation li.active a{
      color: black;
  }
  </code></pre>