需要帮助以突出显示html / dreamweaver / css中的下划线活动页面

Question

我有一个网站，我要在其中突出显示或强调活动页面，以便观众一眼就能知道他们在哪个页面上。 这是html和CSS。 我的代码如下所示：

<div class="mainNav" id="nav1">
<span class="navBar">
<a href="index.html" id="homelink">HOME</a> | 
<a href="team.html" id="teamlink">OUR TEAM</a> | 
<a href="partners.html" id="partnerlink">PARTNERS</a> | 
<a href="contact.html" id="contactlink">CONTACT US</a>
</span>
</div>

我对此有些陌生，并且对Dreamweaver，HTML和CSS有一定的了解，因此我需要找到一种方法来轻松识别网站访问者的页面。 任何帮助表示赞赏。

Answer 1

如果您要手工制作每个HTML页面，那么您要做的就是为突出显示的<a></a>标签提供一个CSS类，然后在CSS工作表中指定用于突出显示该类锚点的规则。 这是一个简单的例子：

HTML

<a href="www.example.com/page1.html" class="highlighted">About me</a>
<a href="www.example.com/page2.html">Contact me</a>

CSS

a.highlighted {
  font-weight: bold;
}

另一种选择是使用可能有点混乱的JavaScript或服务器端解决方案，例如内容管理系统。

Answer 2

也许此JavaScript是有帮助的。 它将页面上的链接与当前页面进行比较，并使链接文本以粗体显示以进行匹配。

您可以将其放置在主体执行加载的函数中，也可以将其放置在HTML文档的末尾。

var links=document.getElementsByTagName("A");
for(var i=0;i<links.length;i++)
{
    if(location==links[i].href)
    {
        links[i].style.fontWeight="bold";
    }   
}