Se no caso estiveres a construir um website com páginas estáticas, em HTML por exemplo, a melhor maneira de se fazer isso é adicionar uma classe - linkAtivo
por exemplo, no link de navegação correspondente a cada página designada que supostamente será a página atual. Por outras palavras:
Imaginemos que temos uma página sobre.html
. Para destacar o link de navegação para sabermos que estamos na página sobre
, abriremos o ficheiro sobre.html
e na navegação desta página adicionaremos a classe linkAtivo
ao link sobre.
Página - 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>
E no CSS que será o mesmo para todas as páginas:
.navegacao a.linkAtivo {
color: red;
}
Depois é só fazer o mesmo em todas as páginas. Por exemplo
Página 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>
E por aí em diante...
Se quiseres mesmo utilizar Javascript, podes obter o mesmo resultado da seguinte maneira:
<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>