jQuery "active"类的分配

Question

我想做的就是创建一个无序链接列表，当用户点击其中一个链接时，父级列表项会被赋予“active”类。一旦在该列表中再次点击另一个链接，则检查是否已经分配了“active”类，将其从该列表项中删除，并添加到最近点击的链接的父级列表项中。

例如：

步骤一 - 用户点击了“我是链接二”

<ul>
<li><a href="#">I am link one</a></li>
<li class="active"><a href="#">I am link two</a></li>
</ul>

第二步 - 用户现在点击了“我是链接一”的链接。

<ul>
<li class="active"><a href="#">I am link one</a></li>
<li><a href="#">I am link two</a></li>
</ul>

相当简单，但是真的让我累坏了。

- user120944

Answer 1

假设：UL元素具有类'linksList'。

$('.linksList li a').click(function()
{
  $('.linksList li').removeClass('active');
  $(this).parent().addClass('active');
});

- Lior Cohen

---

这将从所有<li>元素中删除活动类，而不仅仅是在各自的<ul>中。这是您想要的吗？ - Russ Cam

@Russ Cam：如果他在示例中添加了ul的ID/Class，这个问题就可以很容易地解决。 - Lior Cohen

修改了答案以符合我之前评论中的建议。 - Lior Cohen

Answer 2

以下类似的内容应该可以实现。

$(function() {
    $('li a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.closest('ul').children('li').removeClass('active');
        $this.parent().addClass('active');
    });
});

Working Demo

- Russ Cam

---

如果您能提供比我发布的更全面的解决方案，我会给您点赞。 - Lior Cohen

Answer 3

这个问题有点老了，但我认为还有改进的空间。

“传统”的本地事件绑定：

$("ul a").click(function(){
    $(this).parent("li").addClass("active")
        .siblings().removeClass("active");

    # return false to cancel the default action (e.g. follow the link):
    return false;
});

现在，使用delegate()（jQuery +1.4.2）进行事件委托的方式相同。这使您可以动态添加额外的>li>a而无需重新绑定事件：

$("ul").delegate("a", "click", function(){
    $(this).parent("li").addClass("active")
        .siblings().removeClass("active");

    # return false to cancel the default action
    # and prevent it from bubbling (further) up:
    return false;
});

将 "ul" 更改为与所需列表完全匹配的任何内容，例如 ".linksList"、"#nav" 等。

- Pablo Ziliani