Question

我有一个导航栏：

<div id="the navigation">
<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>
</div>

我想要它，以便当用户点击任何项目时，它会突出显示（例如，它应该得到红色背景）。如果单击了其他项目，则不应再突出显示当前突出显示的项目，而应单击该项目。任何时候都应该只有一个点亮。

如何使用jQuery执行此操作？

Answer 1

编辑：已更新以使用您现在发布的实际HTML。首先，我必须删除你的id值空间，因为空间使得很多或不可能在许多选择器中使用它。

<div id="thenavigation">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

我建议使用这个CSS：

.highlight {background-color: red;}

使用这个jQuery：

$('#thenavigation li a').click(function() {
    $(this).closest("li").addClass('highlight').siblings().removeClass('highlight');
    return(false);   // no default behavior from clicking on the link
});

您可以在此处看到它与HTML一起使用：http://jsfiddle.net/jfriend00/r9s7w/。

或者在没有<a>标签的情况下在这里工作：http://jsfiddle.net/jfriend00/TreKN/。

Answer 2

绑定一个单击处理程序，该处理程序将类名分配给当前元素，并从列表中的其他元素中删除相同的类名：

$('ul li a').click(function() {
    $(this).closest('ul').find('a').removeClass('active');
    $(this).addClass('active');
});

然后使用css设置活动链接的样式。

Answer 3

工作演示。 http://jsfiddle.net/zzlawlzz/MtTBQ/

$('#myNavbar li').click(function() {
    $(this).parent('ul').children('li').css('color','gray');
    $(this).css('color','red');
});

如何突出显示单击的导航项

3 个答案: