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

Question

我正在研究一种帮助用户在网站上导航的解决方案。目前，我的导航栏下方有一个面包屑导航栏，显示用户所在网站当前部分的完整路径。

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

请注意，我使用一个小的 .png 作为箭头标记，我想在每个选项卡下方显示它。

score 3 · Accepted Answer

像这样：演示

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

1 回答 1