title: how to active a class onclick list item
body: <p>I am facing a problem in which i want to add class onclick means the clicked should add class.
  see my image
  <img src="https://i.stack.imgur.com/gUanv.png" alt="enter image description here"></p>
  
  <p>i am doing this by jquery as:</p>
  
  <pre><code>$(function() {
  
  $('.box li').click(function(){
      $('.box li').removeClass('submenu-active');
  
      $(this).addClass('submenu-active');
  
  });
  
  });
  </code></pre>
  
  <p>and my css is:</p>
  
  <pre><code>.aside ul li.submenu-active a {background-color:#df0000; color:#fff;}
  </code></pre>
  
  <p>and my submenu code is:</p>
  
  <pre><code>&lt;ul class="box"&gt;
                  &lt;li class="submenu-active"&gt;&lt;a href="create_financial_year.php"&gt;Create Financial Year&lt;/a&gt;&lt;/li&gt;
                  &lt;li &gt;&lt;a href="select_financial_year.php"&gt;Select Financial Year&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="account_master.php"&gt;Account Master&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="bank_account_master.php"&gt;Bank Account Master&lt;/a&gt;&lt;/li&gt; &lt;!-- Active --&gt;                  
                  &lt;li&gt;&lt;a href="subscription_master.php"&gt;Subscription Master&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="subscription_fee_master.php"&gt;Subscription Fee Master&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="member_master.php"&gt;Member Master&lt;/a&gt;&lt;/li&gt;                
                  &lt;li&gt;&lt;a href="membership_suspension.php"&gt;Membership Suspension&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>i realy Have spent so many hour but did not sort out this...<strong>by this it is working but when i leave click onmouse then the added class got remove...</strong>
  any suggestion would be highly responsive...thanxxx</p>