使用css / html在链接列表中突出显示当前页面[重复]答案

【问题标题】：highlighting the current page in a list of links using css / html [duplicate]使用css / html在链接列表中突出显示当前页面[重复]
【发布时间】：2013-06-23 11:31:15
【问题描述】：

根据要求进行了编辑以包含 HTML - 我已经删除了完整的 url，因为它们在受保护的临时服务器上发布它们没有意义

我正在尝试修改一个朋友的网站，该网站已经建立，以便在每个页面上都有一个子菜单，但只编码一次。

我希望能够为您当前正在查看的页面的链接添加高亮显示，但我必须在一个 html sn-p 中完成这一切 - 所以下面的代码在用于导航的 html 列表之前.

列表呈现良好，除了我无法突出显示当前页面（“活动”标签仅在您单击页面时突出显示）。

我已经阅读了一些关于在单独的文件中添加“当前链接”格式的其他帖子，但不幸的是，我必须在这个 sn-p 中包含所有代码。

鉴于此，我想要实现的目标是否可行？

谢谢

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：

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

【问题讨论】：

请也提供您的 HTML。
这就是:active 所做的。如果要突出显示“当前”菜单项，则必须通过在 HTML 代码中使其特殊来使其对 CSS 可识别——例如通过添加“活动”或“当前”类。
Liam - 我看到了这个，但它似乎只是在谈论活动标签，这不是我想要的。或者使用需要我在 html sn-p 之外有一个文件的解决方案，这在此处是不可能的。但如果我遗漏了什么，请告诉我！
你是坚持使用 CSS 和 HTML 还是可以使用 Javascript/jQuery？
感谢 CBroe - 但这听起来像是我需要在
标记内的每个页面上定义活动链接，而这在此处是不可能的 - 这是所有页面的一段代码。如果我误解了，请告诉我。

【解决方案1】：

http://www.w3schools.com/cssref/sel_active.asp

定义和用法 :active 选择器用于选择活动链接并为其设置样式。

当您点击链接时，链接将变为活动状态。

要在导航中突出显示当前页面，您需要添加额外的类以将元素标记为活动页面（当前页面）。例如，您将拥有

#navigation li a.current{
   color: #ffffff;
   background:#f1d74c;
}

和html

<div id="navigation">
    <li>
        <a ...> other page</a>
    </li>
    <li>
        <a class="current" ...>current page</a>
    </li>
</div>

Tim 有一个很好的方法来添加 current 到当前页面的链接，你只需要添加一个 javascript 行：

$("a[href*='" + location.pathname + "']").addClass("current");

【讨论】：

冒着听起来完全愚蠢的风险（以前从未使用过 javascript）我会在代码中的下落放置 javascript 行吗？
javascript通常位于head标签，在这行之前你需要先包含jquery。如果您使用的是 php，则可以在每个页面标题处自动包含此内容。
好吧 - 我无法编辑页面的标签。
通常但不是必须的，您也可以将其包含在正文部分。
根据您放置脚本的位置，它在执行时会有所不同。在头部，它将在页面加载期间执行。如果你把它放在标签之前，它会在所有内容加载完成后执行。