如何与Jquery链接功能

我想使可点击链接处于活动状态（边框和链接a颜色）。边框切换点击链接，但链接的颜色不变。我想活动链接为黄色#eab000（边框和链接a颜色）。和非活动链接是黑色404040如何与Jquery链接功能

我试图

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

});

来源

2015-11-16 Daniel

我认为问题在于您使用的是 .find（'a'），它将所有链接变为黄色，将该CSS应用于所有锚点 –

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

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

的jsfiddle here

甚至更好，如果你是在给链接：

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

Link

我要指出，我已经添加了下面的CSS：

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

来源

2015-11-16 12:24:42

（边框和链接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', 
     }).find('a').css({ 
      'color' : '#eab000' 
     }).parent().siblings('li').css({ 
     'border':'none', 
     }).find('a').css({ 
     'color':'#404040' 
     }); 

    });

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

见你的小提琴，固定，here

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

来源

2015-11-16 12:24:42

我为您在遵循简单规范方面缺乏能力而投降 – musefan

@musefan - 它的工作，并链接 –

想想出来的各种方法的，因此这是怎么回事进入下一个：

css =出来：一样，所以忽略清晰

this =出：在li点击
siblings =在：利，出：其他li S上的li的点击
find =：所述其他li S，出来：所有a S下的其他li小号

，如果你移动的find起来：

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

匹配.first那么一会的工作，但兄弟姐妹不会像现在：

this =出：在li点击
find =在：li点击，out：全部a s点击下li
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' 
});

来源

2015-11-16 14:07:46

如何与Jquery链接功能

回答

相关问题