Javascript jquery已选择链接激活，但不同的div

我想用jquery激活所选链接。但是我的链接是用不同div中的css类分组的

<div class="menu-container">
    <div class="button-group">
        <a href="#" id="manu1">clients</a>
        <a href="#" id="menu2">supplier</a>
    </div>
    <div class="button-group">
        <a href="#" id="menu3">supplier</a>
    </div>
</div>

我想将所选链接更改为活动css类，其他链接则不更改。但是我的按钮组正在分离一个标签。因此，两个链接显示为活动链接

---

工作应用程序在这里。

您需要进一步向上移动才能找到它们，请尝试以下操作：

$('div.menu-container').on('click','.button-group > a', function(){
  $(this).closest('.menu-container').find('a.active').removeClass('active');
  $(this).addClass('active');
});

---

您需要进一步向上才能接触到他们，请尝试以下方法：

$('div.menu-container').on('click','.button-group > a', function(){
  $(this).closest('.menu-container').find('a.active').removeClass('active');
  $(this).addClass('active');
});

---

仅为

同级
元素删除
活动
类。只需删除所有锚元素的活动类，如下所示。更新脚本，如下所示

 $('div.menu-container').on('click','.button-group > a', function(){
 $('.button-group > a').removeClass('active');
 $(this).addClass('active');
 })

  $('div.menu-container').on('click','.button-group > a', function(){
    if($(this).hasClass('active'))
    {
       $(this).removeClass('active'); 
    }
    else
    {
       $('.button-group > a').removeClass('active'); 
       $(this).addClass('active'); 
    }
 });


编辑：
根据您的新要求
，如果我第二次单击活动链接，它应该是非活动的
，请如下更新jquery

 $('div.menu-container').on('click','.button-group > a', function(){
 $('.button-group > a').removeClass('active');
 $(this).addClass('active');
 })

  $('div.menu-container').on('click','.button-group > a', function(){
    if($(this).hasClass('active'))
    {
       $(this).removeClass('active'); 
    }
    else
    {
       $('.button-group > a').removeClass('active'); 
       $(this).addClass('active'); 
    }
 });

您仅为
同级元素删除
活动的
类。只需删除所有锚元素的活动类，如下所示。更新脚本，如下所示

 $('div.menu-container').on('click','.button-group > a', function(){
 $('.button-group > a').removeClass('active');
 $(this).addClass('active');
 })

  $('div.menu-container').on('click','.button-group > a', function(){
    if($(this).hasClass('active'))
    {
       $(this).removeClass('active'); 
    }
    else
    {
       $('.button-group > a').removeClass('active'); 
       $(this).addClass('active'); 
    }
 });


编辑：
根据您的新要求
，如果我第二次单击活动链接，它应该是非活动的
，请如下更新jquery

 $('div.menu-container').on('click','.button-group > a', function(){
 $('.button-group > a').removeClass('active');
 $(this).addClass('active');
 })

  $('div.menu-container').on('click','.button-group > a', function(){
    if($(this).hasClass('active'))
    {
       $(this).removeClass('active'); 
    }
    else
    {
       $('.button-group > a').removeClass('active'); 
       $(this).addClass('active'); 
    }
 });

尝试以下操作：从
.menu container
下的所有锚点链接中删除
活动类，然后将“活动”类应用于当前单击的元素

$('div.menu-container').on('click','.button-group > a', function(){
      $('div.menu-container').find('.active').removeClass('active');
      $(this).addClass('active');

});

尝试以下操作：从
.menu container
下的所有锚链接中删除
活动的
类，然后将“活动”类应用于当前单击的元素

$('div.menu-container').on('click','.button-group > a', function(){
      $('div.menu-container').find('.active').removeClass('active');
      $(this).addClass('active');

});

像这样试试：

$(document).ready(function(){
    $("a[id ^= 'menu']").on('click',function(){
        $("a[id ^= 'menu']").removeClass('active');
        $(this).addClass('active')
    })


})

试着这样做：

$(document).ready(function(){
    $("a[id ^= 'menu']").on('click',function(){
        $("a[id ^= 'menu']").removeClass('active');
        $(this).addClass('active')
    })


})

请参阅解决方案

$('div.menu-container').on('click','.button-group > a', function(){
    $('div.menu-container').find('a.active').removeClass('active');
    $(this).addClass('active');
})

请看解决方案

$('div.menu-container').on('click','.button-group > a', function(){
    $('div.menu-container').find('a.active').removeClass('active');
    $(this).addClass('active');
})

点击一下就可以激活链接。如果我第二次点击激活链接，你能做什么？它应该是非激活的？一次点击就是激活链接。你能做什么，如果我点击第二次活动链接，它应该是非活动的？