需要幫助以突出顯示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";
    }   
}