如何使用Jquery链接函数 [英] how to chain functions with Jquery

问题描述

我想激活可点击链接(边框和链接a颜色).边框会打开单击的链接，但链接的颜色不会改变.我希望活动链接为黄色#eab000(边界和链接a颜色).并且非活动链接为黑色404040(边框和链接a颜色)

i want to make the clickable link active ( the border and the link a color). the border is switching on the clicked links but the color of the link is not changing. i want the active link to be yellow #eab000(the border and link a color) . and the non active links to be black 404040(the border and link a color)

查看我的资料

我正在尝试

  $('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上的

So how about changing the activeItem to be on the li that has been clicked?

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

JSFiddle 此处

JSFiddle here

或者，如果您要进行链接，甚至更好:

Or even better, if you're in to chaining:

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

链接

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

I should point out that I've added the following CSS:

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

这篇关于如何使用Jquery链接函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！