标记在导航栏中显示当前页面

Question

我正在制定一个解决方案来帮助用户在网站上导航。目前，我的导航栏下方有一个痕迹导航栏，显示用户所在站点当前部分的完整路径。

我现在想创建一个脚本或使用CSS规则在导航栏中的标签下方显示标记，以显示用户所在的部分。有人可以告诉我一些可能用于实现此目的的一般方法吗？

请注意，我使用一个小的.png作为箭头标记，我希望在每个标签下方显示。

Answer 1

像这样：DEMO

<强> HTML：

<ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>​

<强> CSS：

.active {
       background:#ccc url(path/to/image/marker.png) center bottom no-repeat; 
}

通过将标记切换为单击链接，您需要使用脚本语言，如jQuery / Javascript

jQuery解决方案：

$("ul li a").on('click', function(e){
   e.preventDefault();
   $(this).closest('li').addClass('active').siblings().removeClass('active')
});​