1

已按要求编辑以包含 HTML - 我已删除完整的 url，因为它们位于受保护的登台服务器上，因此没有必要发布它们

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

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

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

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

鉴于此，我想要实现的目标是可能的吗？

谢谢

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

1 回答 1

12

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 有一个很好的方法来添加当前页面链接，你只需要添加一个 javascript 行：

$("a[href*='" + location.pathname + "']").addClass("current");
于 2013-06-26T11:04:26.640 回答