如何使用Jquery链接函数

how to chain functions with Jquery

本文关键字：函数 链接 Jquery 何使用      更新时间：2023-09-26

我想激活可点击链接（边框和链接a颜色）。边框在单击的链接上切换，但链接的颜色不变。我希望活动链接为黄色#eab000（边框和链接a颜色）。非活动链路为黑色404040（边界和链路a颜色）

看我的小提琴

我在试

  $('ul li').first().css({
   'border':'1px solid #eab000',
  }).find('a').css({
   'color':'#eab000'
  });
  $('ul li').on('click',function(e){
   e.preventDefault();
   $(this).css({
    'border':'1px solid #eab000',
   }).siblings('li').css({
    'border':'none',
   }).find('a').css({
    'color':'#eab000'
   });
 });

那么，将activeItem更改为已单击的li上如何？

  $('ul li').on('click',function(e){
      e.preventDefault();
      $(this).siblings().removeClass("activeItem");
      $(this).addClass("activeItem");
  });

JSFiddle此处

或者更好的是，如果你正在进行链接：

  $('ul li').on('click',function(e){
      e.preventDefault();
      $(this).addClass("activeItem").siblings().removeClass("activeItem");
  });

链接

我应该指出，我添加了以下CSS：

ul li.activeItem
{
    border: 1px solid #eab000;
}
ul li.activeItem a
{
    color:#eab000;
}

您可以使用

$('ul li').first().css({
    'border':'1px solid #eab000',
  }).find('a').css({
    'color':'#eab000'
  });
  $('ul li').on('click',function(e){
      e.preventDefault();
      $(this).css({
        'border':'1px solid #eab000',
      }).find('a').css({
          'color' : '#eab000'
      }).parent().siblings('li').css({
        'border':'none',
      }).find('a').css({
        'color':'#404040'
      });
  });

您使用".s兄弟姐妹"作为"非活动"链接，然后将其锚定颜色设置为您的活动颜色。通过在使用"同级"之前设置锚点，然后使用"父级"，可以在链中保持一致级别。

看看你的小提琴，修好了，在这里

然而，在代码中使用特定颜色会使这种结构有点脆弱。其他示例中显示的添加/删除类是一个更可持续的解决方案。

思考每个方法的结果，以及下一个方法的结果：

css=out：与in相同，因此为了清晰起见忽略

this=out：li点击
siblings=in:li，out:li的其他lis点击
find=in:其他lis，out:其他lis下的所有as

如果您向上移动find：

$(this).css({
 'border':'1px solid #eab000',
}).find('a').css({
 'color':'#eab000'
}).siblings('li').css({
 'border':'none',
});

为了匹配.first，那么a会起作用，但兄弟姐妹不会像现在这样：

this=out：li点击
find=in:点击的li，out:点击的所有li下的a
siblings=输入："a"，输出：无（假设）

因此，理想情况下，在兄弟姐妹之前，您希望以某种方式"取消"以前的find，幸运的是jquery只有这个：.end（）

您可以将其应用于原始（查找a，然后返回查找兄弟姐妹）或（查找兄弟姐妹，然后返回寻找a）

这是丢失的额外变色

$(this).css({
 'border':'1px solid #eab000',
}).find('a').css({
 'color':'#eab000'
})
.end()
.siblings('li').css({
 'border':'none',
}).find('a').css({
 'color':'#404040'
});
相关文章：