javascript - jquery选择的链接激活但不同的div

Question

我想用 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>

Jquery是这样的

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

我想将选定的链接更改为 active css 类，而其他则不要。但是我的button-group 正在分隔标签。所以两个 a 链接显示为事件的。

工作应用 jsfiddle在这里。

Answer 1

您只为 siblings 元素删除了 active 类。只需删除所有 anchor 元素的事件类，如下所示。像下面这样更新您的脚本。

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

DEMO

编辑:

根据您的新要求如果我第二次单击事件链接，它应该是停用的，像下面这样更新您的 jquery。

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

DEMO