突出显示我目前所处的链接

Question

如何获得我目前所在的链接background-color？

        <div id="pages">
            <a class="page" href="homepage.html">HOMEPAGE</a>|
            <a class="page" href="favorites.html">FAVORITES</a>|
            <a class="page" href="education.html">EDUCATION </a>|
            <a class="page" href="dreamplaces.html">DREAMPLACES </a>|
            <a class="page" href="dreamfoods.html">DREAMFOODS</a>
        </div>

这是我的输出看起来的样子，但我希望当我在该链接时突出​​显示

Answer 1

如果您指的是如何突出显示基于该页面的链接，那么您可以简单地给出一个类似这样的类：

<a class="page current" href="homepage.html">HOMEPAGE</a>|

.current {
  background-color: red;
}

您只需更改哪个a每个页面都有current类。

Answer 2

CSS：

.selected { background-color: #eee;}  //the color is just for demonstration

使用Javascript：

$('a[href="' + document.location.href.split('/').pop() +  '"]').addClass('selected');

Answer 3

您可以将当前链接与href进行比较，也可以将链接上的唯一类放在href上，然后获取URL的路径并在其上添加一些类。

Answer 4

为Link添加背景颜色是一项简单的任务，但根据您实现导航菜单的方式可能会很复杂。您是将上面的代码复制/粘贴到每个HTML文档上，还是以一种奇特的方式执行此操作？

如果你是复制粘贴： 只需在当前页面的导航菜单中添加一个附加类，如下所示：

<div id="pages">
    <a class="page currentPage" href="homepage.html">HOMEPAGE</a>|
    <a class="page" href="favorites.html">FAVORITES</a>|
    <a class="page" href="education.html">EDUCATION </a>|
    <a class="page" href="dreamplaces.html">DREAMPLACES </a>|
    <a class="page" href="dreamfoods.html">DREAMFOODS</a>
</div>

在CSS文档中，您可以为“currentPage”类分配背景，如下所示：

.currentPage { 
    background-color:green;
}

但是，如果您使用一个导航文档并通过脚本将其包含在每个页面中，那么最直接的答案就是向类中添加一个变量，以便您可以在子页面上控制该变量。
例如:(以PHP为例，如果这是您的方法而不是您的语言，请告诉我们您的服务器端语言是什么，以便我们为您提供所述语言的示例）

<div id="pages">
    <a class="page <?php echo $homePage ?>" href="homepage.html">HOMEPAGE</a>|
    <a class="page <?php echo $favPage ?>" href="favorites.html">FAVORITES</a>|
    <a class="page <?php echo $eduPage?>" href="education.html">EDUCATION </a>|
    <a class="page <?php echo $DPlacesPage?>" href="dreamplaces.html">DREAMPLACES </a>|
    <a class="page <?php echo $DFoodPage?>" href="dreamfoods.html">DREAMFOODS</a>
</div>

在您的个人网页上，您将声明相应的变量，使其不为空。例如，在“教育”页面上，您将声明

<?php $eduPage = ' currentPage'?>

这会将您的“currentPage”课程反映出您的教育链接。我确信有更有效的方法可以做到这一点，但如果您使用服务器端处理并且没有使用任何其他逻辑来生成导航菜单，那么这将完成工作... 您的CSS页面需要包含以下内容才能使其正常工作：

.currentPage { 
    background-color:green;
}