jQuery“活跃” 课堂作业

发布于 2024-08-01 18:38:53 字数 589 浏览 8 评论 0原文

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

示例：

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

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

非常简单，但是我打败了我。

原文

All I am trying to accomplish is to be able to have an unordered list of links in which one is clicked, the parent list item is assigned the class "active." Once another link is clicked within that list, it checked to see if "active" is assigned, remove it from that list item, and add it to the most recent clicked links parent list item.

Example:

Step One - User has clicked the link "I am link two"

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

Step Two - User has now clicked the link "I am link one"

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

Pretty simple, but man I beat me up.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜声 2024-08-08 18:38:53

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

“传统”本地事件绑定：

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

This question is a bit old now, but I think there's still space for improvement.

"Traditional" local event binding:

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

Now, the same using event delegation via delegate() (jQuery +1.4.2). Lets you dynamically add extra >li>a without having to rebind the event:

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

Change "ul" to anything that matches exclusively the desired list(s), e.g. ".linksList", "#nav", etc.

回复收藏 0 原文

假情假意假温柔 2024-08-08 18:38:53

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

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

Assumption: the UL element has the class 'linksList'.

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

回复收藏 0 原文

著墨染雨君画夕 2024-08-08 18:38:53

像下面这样的东西应该可以做到

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

工作演示

Something like the following ought to do it

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

Working Demo

回复收藏 0 原文

~没有更多了~