Question

如何使用基于当前页面的不同颜色突出显示主菜单中的每个链接？

例如，当前页面与我们联系时，将主页菜单中的联系我们链接颜色更改为红色当当前页面是关于我们的时候，在主菜单中将about us链接颜色更改为橙色等等

Answer 1

您可以使用javascript执行此操作：

首先，检索您当前的网址：

var pathname = window.location.pathname;

例如，返回“/contact.html” 然后你可以使用这个值来确定哪个项目是高亮的：

if(pathname == "/contact.html"){
   document.getElementById("contact").addClass("hilighted");
}

等等。

Answer 2

a:active：当您点击链接并按住它时 a:visited：链接已被访问时。

如果您希望突出显示与当前页面对应的链接，您可以为链接定义一些特定样式 -

.current {
   color: red;
   background-color: #000000;
}

仅在服务器端或客户端（使用javascript / jquery）将此新类.current添加到相应的li（链接）。

使用JQuery，您可以使用.each函数通过以下代码迭代链接：

$(document).ready(function() {
    $("[href]").each(function() {
    if (this.href == window.location.href) {
        $(this).addClass("current");
        }
    });
});

根据您的网页结构和使用的链接，您可能需要缩小选择范围，例如：

$("nav [href]").each ...

如果您使用的是url参数，则可能需要删除这些参数：

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

这样您就不必编辑每个页面了。

source

Answer 3

有很多方法，如果没有看到你的代码，很难说哪种方法最好。

您可以在每个页面上使用一些Javascript来添加或更改链接的类别。

例如，在您的联系我们页面上使用像

这样的脚本

var contactLink = document.getElementById("contactUs");
contactLink.addClass("orangeLink");

基于当前页面在主菜单中以不同颜色突出显示链接

3 个答案: