How to change the color of the link when it is on the link page accessed

In case you are building a website with static pages, in HTML for example, the best way to do this is to add a class - linkAtivo for example, in the navigation link corresponding to each designated page that is supposed to be the current page. In other words:

Let's say we have a sobre.html page. To highlight the navigation link to know that we are on the page sobre , we will open the file sobre.html and in the navigation of this page we will add the class linkAtivo to the link on .

Page - sobre.html

<ul class="navegacao">
    <li><a class="nav" href="/inicio.html">Início</a></li>
    <li><a class="nav" href="/contacto.html">Contacto</a></li>
    <li><a class="nav linkAtivo" href="/sobre.html">Sobre</a></li> <!-- Classe Adicionada -->
</ul>

And in CSS it will be the same for all pages:

.navegacao a.linkAtivo {
    color: red;
}

Then just do the same on every page. For example

Page contacto.html :

<ul class="navegacao">
    <li><a class="nav" href="/inicio.html">Início</a></li>
    <li><a class="nav linkAtivo" href="/contacto.html">Contacto</a></li> <!-- Classe Adicionada -->
    <li><a class="nav" href="/sobre.html">Sobre</a></li>
</ul>

  

And so on ...

If you really want to use Javascript, you can get the same result as follows:

<script type="text/javascript">
for (var i = 0; i < document.links.length; i++) {
    if (document.links[i].href == document.URL) {
        document.links[i].className = 'linkAtivo';
    }
}
</script>

Look you can do as follows: (In case the person is in Link 1 Start)

Html

        <nav id="navigation">
                <ul>
                <li class="active"><a href="link1.html">Ínicio</a></li>
                <li><a href="link2.html">Sobre</a></li>
                <li><a href="link3.html">Serviços</a></li>
            </ul>
            <div class="cl">&nbsp;</div>
        </nav>

Css

           #navigation { padding:0 21px;  margin-bottom: 15px; }
           #navigation ul { list-style:none; list-style-position: outside; }
           #navigation ul li { padding: 0 10px; float: left; font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 500; }
           #navigation ul li:first-child { padding-left: 0; }
           #navigation ul li a { color: #4a4a4a; padding: 0 7px; display:block; height: 21px; line-height: 21px; border: 2px solid transparent; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; }
           #navigation ul li.active a,
           #navigation ul li a:hover { border: 3px solid #ffb800;  background: url(images/nav-btn.png) repeat-x 0 0; color:#fff; text-decoration: none; }
           #navigation a.nav-btn { display:none; }

If you want to see the result click here