Need help highlighting our underlining active page in html/dreamweaver/css

Question

I have a website in which I want to highlight or underline the active page so viewers will know which page they are on at a glance. This is html and CSS. My code looks like this:

<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>

I'm a bit new to this and have a fair understanding of dreamweaver, html and CSS so I need to find a way to easily identify the pages for site visitors. Any help is appreciated....

Answer 1

If you're making each HTML page by hand, then all you need to do is provide a CSS class for the highlighted <a></a> tag, then in your CSS sheet, specify rules for highlighting anchors with that class. Here's a simple example:

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;
}

The alternative is to use JavaScript, which could get a little messy, or a server-side solution such as a content management system.

Answer 2

Maybe this JavaScript is helpful. It compares links on the page to the current page and makes the link text bold for matches.

You can place it in a function that loads when the body does or place it at the end of the HTML document.

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