0

inserir a descrição da imagem aqui
A imagem acima é um print do menu que estou desenvolvendo que ficou com o estilo que coloquei certinho no CSS. Porém só quando passo o mouse por cima do link, ou seja quando faço :hover que era o que eu estava fazendo nesse print.

Agora quero configurar para por exemplo:
Clico na página 1, aí vai me levar para a página 1 e o fundo desse mesmo link vai ficar realçado/destacado a verde como no exemplo da imagem acima, mas não na página Geral, apenas na página atual pois não estou na página Geral, e vice-versa. Como faço?

1

1 Resposta 1

3

Se estiveres a criar página por página, podes utilizar essa vantagem para fazer isso.
Por exemplo, imaginemos que temos 2 páginas: index.html e sobre.html, e queremos destacar o link da página atual conforme navegamos de uma para a outra.

Bom, primeiro vamos criar uma class responsável pelo estilo CSS para este link em destaque:

.paginaAtual {
    color:#fff;
    background-color:#71953E;
}

Então agora iremos fazer o seguinte - Na página index.html os links de navegação irão ser criados da seguinte maneira:

<div id="menu">
    <ul>
        <li class="linkMenu paginaAtual"><a href="index.html">Index page</a></li>
        <li class="linkMenu"><a href="sobre.html">Sobre</a></li>
    </ul>
</div>

Enquanto na página sobre.html os links serão criados assim:

<div id="menu">
    <ul>
        <li class="linkMenu"><a href="index.html">Index page</a></li>
        <li class="linkMenu paginaAtual"><a href="sobre.html">Sobre</a></li>
    </ul>
</div>

Caso o exemplo acima não seja uma opção, eis uma alternativa para isto:

Nesta segunda opção, iremos utilizar JavaScript, mais precisamente a biblioteca jQuery. Para utilizarmos a biblioteca jQuery caso não estejas familiarizado com ela, precisamos de a implementar no <head> do nosso documento/website usando a seguinte linha de código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Esta linha de código acima irá implementar a biblioteca jQuery hospedada pela Google, mas também poderia ser hospedada por ti no teu servidor. Depois então iremos criar o nosso menu:

<div id="menu">
    <ul>
        <li class="linkMenu"><a href="index.html">Index page</a></li>
        <li class="linkMenu"><a href="sobre.html">Sobre</a></li>
    </ul>
</div>
$("a[href*='" + location.pathname + "']").addClass("paginaAtual");

Esta linha de código Javascript acima necessita de ser implementada dentro da tag <script></script> no teu documento.

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 .