Javascript 如何使用Jquery链接函数

我想激活可点击链接（边框和链接

a

color）。边框正在打开单击的链接，但链接的颜色没有改变。我希望活动链接为黄色

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

 });

你可以用

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

  });

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

看你的小提琴，修好了

---

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

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

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

JSFIDLE

或者更好，如果你在链：

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

---

思考每种方法会产生什么结果，以及下一种方法会产生什么结果：

css

=out：与in相同，为清晰起见忽略

this

=out:the

li

点击

同级

=in:li，out:li的另一个

li

s单击了

find

=in:other

li

s，out:all

a

s位于other

li

s

如果向上移动了

查找
：

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

要匹配
。首先
，然后a会工作，但兄弟姐妹不会像现在这样：

this
=out:the
li
点击

find
=in:the
li
点击，out:all
a
s在点击的
li


同级
=in:a，out:nothing（假定）

因此，理想情况下，在兄弟姐妹之前，您希望以某种方式“取消”上一个
查找
，幸运的是jquery有以下功能：

您可以将此应用于原始文件（查找
a
然后返回查找同级文件）或（查找同级文件然后返回查找
a
）

这是丢失的额外颜色变化

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

我认为问题在于你正在使用.find（'a'），它将你所有的链接都变成黄色，它将CSS应用于所有的主持人。我对你缺乏遵循简单规范的能力投了反对票