title: jquery, add active class to links
body: <p>Hi i'm working on a off canvas menu and I want to add a class to highlight active menu item but the jquery code I'm currently working with does not seem to add the class to the active link. I tried all potential solutions I came across in the web and nothing seem to work. Any suggestions, ideas, resources? </p>
  
  <pre><code>&lt;nav class="site-menu"&gt;
         &lt;div class="menu-list"&gt; 
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="portfolio.php"&gt;portfolio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="projects.php"&gt;projects&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="process.php"&gt;process&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="blog.php"&gt;blog&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.php"&gt;contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code> .site-menu ul {
      list-style: none;
      padding: 20px;
      margin: 0;
  }
  
  .site-menu ul li a {
      display: block;
      width: 100%;
      height: 50px;
      line-height: 50px;
      color: #7f7f7f;
      background: transparent;
      text-decoration:none;
  }
  
  .menu-list{
      position: absolute;
      top: 80px;
      margin-left: 10px;
      font-family: 'Open Sans',     sans-serif;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 2px; 
      text-align: left;
       }
  
  .active {
      color:#fff;
  }
  </code></pre>
  
  <p>script</p>
  
  <pre><code>var selector = ".site-menu li";
  
  $(selector).click(function(){
      $(selector).removeClass('active');
      $(this).addClass('active');
  });
  </code></pre>