0

Vejo muitos sites que, quando a pessoa abre a pagina "SOBRE", é ativado um CSS que estiliza apenas aquele link. Acredito que seja com JS, e que envolva comparação com URL, mas na prática não faço ideia.

De repente pareça ser uma duplicata DESSE LINK, mas no caso foi feito com PHP, e não acredito que seja a forma mais prática..

3

2 Respostas 2

1

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>
3
  • Me expressei de forma errada. Como disse no comentario acima, eu incluo um arquivo header com o menu, então os links não se alteram.. como ficaria isso?
    – Cobra
    Commented 21/03/2016 às 19:41
  • experimente o ultimo método em Javascript que eu adicionei no final da minha resposta @ThiagoBarros . Isto é um site WordPress?
    – Chun
    Commented 21/03/2016 às 20:04
  • Não, to fazendo tudo na mão. Apenas quero fazer com que o link ative uma classe conforme sua URL (estou na pagina sobre? então o item do menu 'sobre' ficará vermelho). Fazer o CSS eu sei, a dificuldade é saber a lógica para tal, e também se faço em JS ou PHP. Poderia fazer vários 'elseif' em PHP para consultar a URL, mas gostaria de ideias e alguma prévias..
    – Cobra
    Commented 21/03/2016 às 20:08
1

Olha você pode fazer da seguinte forma: (No caso a pessoa está no Link 1 Inicio)

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

Se quiser ver o resultado clique aqui

2
  • Acontece que meu site usa um header dinâmico incluído com PHP, ou seja, os links sempre são os mesmos.. Não tem como eu dar uma classe diretamente no link.. Imaginei que com JS seria mais facil, mas acredito que seja melhor utilizar php..
    – Cobra
    Commented 21/03/2016 às 19:39
  • você pode usar html em php livremente, só fazer as devidas alterações Commented 22/03/2016 às 12:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .