title: jquery add class to main menu <li> by click sub menu <li> a (anchor)
body: <p>I want if I click on sub menu <strong>service1</strong> than anchor of <strong>service1</strong> should add class "<strong>active</strong>" and main menu <strong>service</strong> anchor add class "<strong>active-main</strong>".</p>
  
  <p>In css I have two class <strong>.active</strong> have green background and <strong>.active-main</strong> have blue background.</p>
  
  <p><a href="https://i.stack.imgur.com/cy3KR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cy3KR.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(function(){
  
    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
  
    // now grab every link from the navigation
    jQuery('ul.nav li a').each(function(){
  
      // and test its normalized href against the url pathname regexp
      if(urlRegExp.test(this.href.replace(/\/$/,''))){
        jQuery(this).addClass('active');
      }
  
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.active{
    text-transform: uppercase;
    background:green;
  }
  
  .active-main{
    text-transform: uppercase;
    background:blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="nav"&gt;
    &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;
      &lt;a href="service.html"&gt;Service&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt; &lt;a href="service1.html"&gt;Service 1&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="service2.html"&gt;Service 2&lt;/a&gt; &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;h1&gt; Service 1 &lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>