所选项目下方的导航栏线答案

【问题标题】：navigation bar line underneath the selected item所选项目下方的导航栏线
【发布时间】：2014-03-17 15:38:35
【问题描述】：

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

类似于下面的 CSS 示例。我看了一整天我知道这是可能的。

几乎像一个边距，但颜色不同，比如一个矩形选定的项目，底部有一条线。我试图把一张图片放在这个描述中，但它说它需要 10 个声望？？？？

【问题讨论】：

发布代码以获得快速帮助。

标签： jquery html css styles

【解决方案1】：

如果您想在下面为每个选定的菜单赋予不同的颜色，

为每个 li 添加数据属性 data-color ="red" 或 data-color="blue"

<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"));
                           });
});

您可以在数据属性上使用十六进制颜色代码

【讨论】：

【解决方案2】：

如果这是你唯一的目标，你几乎可以做任何事情（风格方面）。这样做相当快。（样式可能很糟糕，但这只是为了展示概念）

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

在这里，line 是我的 CSS 类。

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

【讨论】：