jQuery“活动”类分配

【问题标题】：jQuery "active" class assignmentjQuery“活动”类分配
【发布时间】：2009-08-11 21:06:39
【问题描述】：

我想要完成的只是能够拥有一个单击链接的无序列表，父列表项被分配为“活动”类。在该列表中单击另一个链接后，它会检查是否分配了“活动”，将其从该列表项中删除，并将其添加到最近单击的链接父列表项中。

例子：

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

<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>

很简单，但是我打败了我。

【问题讨论】：

标签： jquery state sticky

【解决方案1】：

假设：UL 元素具有类“linksList”。

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

【讨论】：

这将从所有
元素中删除活动类，而不仅仅是相应

@Russ Cam：如果他在他的示例中为 ul 添加了 ID/Class，这可能很容易解决。

修改了答案以匹配我之前评论中的建议。

【解决方案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

【讨论】：

+1 以获得比我发布的更全面的解决方案。

【解决方案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”等

【讨论】：