jquery - 删除/添加链接类 onclick

Question

我对链接的 onClick 更改进行了大量研究，但无法完全找出我需要的解决方案。我有一个包含三个链接的侧栏菜单。我在我想要默认显示的内容中添加了一个默认的“事件”类。但是，当我单击侧栏中的另一个链接时，我希望删除前一个链接的“事件”类，替换为“非事件”，然后将“事件”应用于新链接。这是我的代码:

HTML:

<div id="sidebar">
    <ul>
        <li><a href="#" id="1" class="active">1</a></li>
        <li><a href="#" id="2" class="inactive">2</a></li>
        <li><a href="#" id="3" class="inactive">3</a></li>
    </ul>
</div>

CSS:

a.active {
    background-color:#ccd9ff;
    border-radius:15px 15px;
}

a.inactive {
    border:0;
    background:0;
}

jQuery:

$(function(){
    $('a.inactive').click(function(){
        $('a.inactive').removeClass('inactive');
        $(this).addClass('active');
    });
});

我读了这个previous post这帮助我弄清楚如何 addClass onclick (上面)，但是我无法删除非事件链接的“事件”类。有人可以帮我吗？

Answer 1

事件委托(delegate)在这里会很好。您可以使用 delegate()^[docs]方法仅在具有 inactive 类的 #sidebar 子代上触发处理程序。

然后使用toggleClass()^[docs]方法来切换 active 和 inactive 类。

$(function(){
    var sidebar = $('#sidebar');  // cache sidebar to a variable for performance

    sidebar.delegate('a.inactive','click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).toggleClass('active inactive');
    });
});

您可以在此处测试代码: http://jsfiddle.net/dstpt/