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

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/.