所选项目下方的导航栏线条

Question

我想进入所选项目下方的导航栏线条样式

与以下CSS示例类似。我看了整天，我知道这是可能的。

几乎像一个边缘，但不同的颜色说一个矩形选定的项目与底部的一条线。我试图把这个描述的图像，但它说，它需要10名声誉？如果你想给每个选定的菜单不同颜色下

Answer 1

，

添加数据属性数据的颜色=“红色”或数据的颜色=“蓝”每个李

<ul id="menu"> 
    <li data-color="red">Menu Item 1</li> 
    <li data-color="blue">Menu Item 2</li> 
    <li data-color="green">Menu Item 3</li> 
</ul> 

写的jQuery上单击事件

$(function() { 
    $("#menu").find("li").on("click", function() { 
       $("#menu").find("li").css("border-bottom","none"); 
       $(this).css("border-bottom","1px solid " + $(this).data("color")); 
          }); 
}); 

的数据属性

Answer 2

您可以用十六进制颜色代码如果这是你唯一的目标，可以做任何事情（风格明智）。 这是否相当快？ （样式可能是非常糟糕的，但是这仅仅是展示的概念）

$("li").on("click", function(){ 
    $("li").removeClass("line"); 
    $(this).addClass("line"); 
}); 

这里，line是我的CSS类。

http://jsfiddle.net/shriek/N8gEj/1/