title: Unable to add css to an li element on clicking the li tag
body: <p>This is the HTML Part-</p>
  
  <pre><code> &lt;div id="sidebar" role="navigation"&gt;
  
                      &lt;ul class="nav nav-sidebar"&gt;
                          &lt;li class="active"&gt;&lt;a href="#"&gt;My Orders&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;My Store&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;My Account&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
  
                  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>/* Sidebar navigation */
      .nav-sidebar {
          background-color: #f5f5f5;
          margin-right: -15px;
          margin-bottom: 20px;
          margin-left: -15px;
      }
      .nav-sidebar &gt; li &gt; a {
          padding-right: 20px;
          padding-left: 20px;
      }
      .nav-sidebar &gt; .active &gt; a {
          color: #fff;
          background-color: #c52d2f;
      }
  </code></pre>
  
  <p>JS Code:</p>
  
  <pre><code> $(document).ready(function() {
  
      $('#sidebar').on('click', 'li' function(){
          $(this).closest('ul').find('.active').removeClass();
          $(this).addClass('active');
  
      });
  });
  </code></pre>
  
  <p>Checkout the demo <a href="http://jsfiddle.net/tu4tsa4n/1/" rel="nofollow">http://jsfiddle.net/tu4tsa4n/1/</a> 
  Whenever i click on an li tag , all the other tags should remove 'active' tag and the clicked 'li' tag should become 'red' or activated. Currently when you click on the tag it becomes highlighted and not red. 
  How can the desired functionality be achieved?</p>