Question

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

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

几乎像边距但颜色不同，请说明一个矩形选项，底部有一条线。我试图把这个描述的图像，但它说它需要10个声誉????

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

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

Answer 2

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

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

在这里，line是我的css类。

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

所选项目下方的导航栏行

2 个答案: