Javascript 根据当前页面以不同颜色突出显示主菜单中的链接

如何根据当前页面以不同颜色突出显示主菜单中的每个链接

例如，当当前页面为contact us时，将主菜单中的contact us链接颜色更改为红色

---

当当前页面为“关于我们”时，请将主菜单中的“关于我们”链接颜色更改为橙色，以此类推。

a:active

：当您单击并按住链接时。

a:visted

：当链接已被访问时

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

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

将这个新类

.current

仅添加到相应的

li

（链接），无论是服务器端还是客户端（使用javascript/jquery）

使用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]) ...

这样你就不必编辑每一页了

---

有很多方法，如果不看代码，很难说哪种方法最好

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

例如，在您的“联系我们”页面上，使用脚本，如

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

---

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

首先，检索您当前的url路径：

var pathname = window.location.pathname;

例如，返回“/contact.html” 然后，您可以使用此值确定要点亮的项目：

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

---

依此类推。

您可以根据当前页面将活动类添加到菜单中

若你们在联系人页面，那个么将活动类添加到“联系我们”菜单中，和“关于我们”页面相同，然后为该活动类执行一些css

例如，如果您处于“联系我们”页面，则：-

<ul>
    <li class="home"><a href="home.html">Home</a></li>
    <li class="contact active"><a href="contact-us.html">Contact Us</a></li>
    <li class="about"><a href="about.html">About Us</a></li>
</ul>

---

它会对你有用。

你试过什么吗？？您的html/js或asp.net代码？？

.contact.active{
   color : red;
}
.about.active{
   color : orange; 
}