jQuery的“主动”课堂作业

Question

所有我想做到的是要能有其中一个被点击链接的无序列表，父列表项被赋予类“活跃”。一旦另一个链接被点击列表中，对其进行检查，看是否“有效”分配，从列表项删除它，并把它添加到最近被点击的链接父列表项。

示例：

步骤一 - 用户已经点击了该链接“我是链接两个”

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

很简单，但人我打我。

Answer 1

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

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

Answer 2

像下面的内容应该做它

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

<强> 工作演示

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;
});

现在，通过代理的使用事件代理相同（）（jQuery的+1.4.2）。使你可以动态添加额外> LI>一个，而不必重新绑定事件：

$("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” 等。