使用 css / html 在链接列表中突出显示当前页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17318170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
highlighting the current page in a list of links using css / html
提问by Glayva
Edited to include HTML as requested - I have removed the full urls as there is no point posting them anyway as they are on a protected staging server
根据要求进行编辑以包含 HTML - 我已经删除了完整的 url，因为无论如何都没有必要发布它们，因为它们位于受保护的登台服务器上
I am trying to amend a friend's website which has been built so that there is a sub menu which appears on every page but is coded only once.
我正在尝试修改已建立的朋友网站，以便在每个页面上都有一个子菜单，但只编码一次。
I want to be able to add a highlight to the link for the page you are currently viewing, but I have to do this all in one html snippet - so the code below preceeds the html list which is used for navigation.
我希望能够为您当前正在查看的页面的链接添加一个突出显示，但我必须在一个 html 片段中完成所有这些操作 - 因此下面的代码位于用于导航的 html 列表之前。
The list renders fine, except that I can't get the current page to highlight (the 'active' tag only highlighting as you click the page).
该列表呈现良好，除了我无法突出显示当前页面（“活动”标签仅在您单击页面时突出显示）。
I have read some other posts about adding 'current link' formatting in a separate file but, unfortunately, I have to include all the code in this snippet.
我已经阅读了一些关于在单独的文件中添加“当前链接”格式的其他帖子，但不幸的是，我必须在此代码段中包含所有代码。
Given that, is what I am trying to achieve possible?
鉴于此，我正在努力实现的目标是可能的吗？
Thanks
谢谢
CSS:
CSS：
<style>
#navigation {
color: #ffffff;
font-family: Sans-Serif;
height: 34px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#navigation li a {
color: #000000;
display: block;
font-size: 12px;
font-weight: bold;
padding: 10px 18px;
text-decoration: none;
}
#navigation li a:hover {
background-color: #b36521;
color: #ffffff;
}
#navigation li a:active {
background: #f1d74c;
color: #ffffff;
}
</style>
HTML:
HTML：
<div id="submenu">
<h3>Menu</h3>
<ul id="navigation">
<li><a href="http://URL/SOAP-BARS">Soap bars</a></li>
<li><a href="http://URL/LIQUID-SOAP">Liquid soap</a></li>
<li><a href="http://URL/BATH-BODY">Bath and body</a></li>
<li><a href="http://URL/SKINCARE">Skincare</a></li>
<li><a href="http://URL/4573204014/CANDLES">Candles</a></li>
<li><a href="http://URL/GIFTS">Gifts</a></li>
<li><a href="http://URL/FAVOURS">Favours</a></li>
<li><a href="http://URL/BROWSE-BY-SCENT">Browse by scent</a></li>
</ul>
</div>
回答by arifnpm
http://www.w3schools.com/cssref/sel_active.asp
http://www.w3schools.com/cssref/sel_active.asp
Definition and Usage The :active selector is used to select and style the active link.
定义和用法 :active 选择器用于选择和设置活动链接的样式。
A link becomes active when you click on it.
单击链接时，链接变为活动状态。
To highlight current page in the navigation you need to add extra class to mark the element as the active page (current page). for example you will have
要在导航中突出显示当前页面，您需要添加额外的类以将元素标记为活动页面（当前页面）。例如你会有
#navigation li a.current{
color: #ffffff;
background:#f1d74c;
}
and the html
和 html
<div id="navigation">
<li>
<a ...> other page</a>
</li>
<li>
<a class="current" ...>current page</a>
</li>
</div>
Tim have a great way to add current to the current page link, you only need to add one javascript line:
Tim 有一个很好的方法可以将当前链接添加到当前页面链接，您只需要添加一行 javascript 代码：
$("a[href*='" + location.pathname + "']").addClass("current");
