jquery通过单击子菜单将类添加到主菜单<li> </li> <li> a（锚点）

Question

我想点击子菜单 service1 而非 service1 的锚点应添加“有效”类和主菜单服务锚点添加类“ active-main ”。

在CSS中我有两个班级 .active 有绿色背景， .active-main 有蓝色背景。

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');
    }

  });

});

.active{
  text-transform: uppercase;
  background:green;
}

.active-main{
  text-transform: uppercase;
  background:blue;
}

<ul class="nav">
  <li><a href="home.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li>
    <a href="service.html">Service</a>
    <ul>
      <li> <a href="service1.html">Service 1</a> </li>
      <li> <a href="service2.html">Service 2</a> </li>
    </ul>
  </li>
</ul>

<h1> Service 1 </h1>

Answer 1

Uri.UnescapeDataString()

演示：https://jsfiddle.net/238qywpq/1/

Answer 2

尝试类似：

$(window).ready(function(){
    $('li a').on('click', function(e){
    e.preventDefault();
    $('li a').removeClass('active');
    $('li').removeClass('active-main');
    $(this).addClass('active');
    $(this).parent('li').closest('.nav > li').addClass('active-main');
  });
});

https://jsfiddle.net/afcmfvzz/