Question

我想激活可点击链接（边框和链接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'
   });

 });

Answer 1

那么如何将activeItem更改为已被点击的li？

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

  });

JSFiddle here

甚至更好，如果你要进行链接：

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

Link

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

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

Answer 2

您可以使用

String variableName="land";
Field[] fields = nyttLista.get(slumpLand).getClass().getFields();
String name = fields[0].getName();
Object value = fields[0].get(obj);

String msg = "What's the capital in " + value.toString() + "?";

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

查看您的小提琴，已修复，here

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

Answer 3

考虑每种方法的结果，以及接下来会发生什么：

this = out：与in相同，因此为了清晰而忽略

li = out：siblings点击了 li = in：li，out：li点击的其他find个 li = in：其他a s，out：其他li下的所有find个

如果你移动了$(this).css({ 'border':'1px solid #eab000', }).find('a').css({ 'color':'#eab000' }).siblings('li').css({ 'border':'none', });：

.first

匹配this然后a将起作用，但兄弟姐妹不会像现在一样：

li = out：find点击了 li = in：a已点击，已点击：点击li下的所有siblings个 find = in：'a'，out：nothing（假设）

理想情况下，在兄弟姐妹之前，您想要某种方式“取消”之前的a，幸运的是jquery就是这样：.end()

您可以将其应用于原始版本（查找a然后返回查找兄弟姐妹）或（找到兄弟姐妹然后返回查找$(this).css({ 'border':'1px solid #eab000', }).find('a').css({ 'color':'#eab000' }) .end() .siblings('li').css({ 'border':'none', }).find('a').css({ 'color':'#404040' });）

这里缺少额外的颜色变化

{{1}}

如何使用Jquery链接函数

3 个答案: