É possível definir um estilo de link que seja exibido apenas quando a página vinculada estiver sendo visualizada?

StackOverflow https://stackoverflow.com/questions/195578

  •  10-07-2019
  •  | 
  •  

Pergunta

Eu tenho um problema como este (este é o menu html/css):

EShop | Outra eShop | Outra eShop

O cliente quer que funcione assim:

O usuário acessa o site, clica no Eshop.Eshop muda para a cor vermelha com contorno de caixa vermelha.O usuário decide visitar outra eshop, então a eshop voltará à cor normal sem o contorno da caixa vermelha, e outra eshop fará o truque do contorno vermelho novamente.

Eu sei que existe A:visited, mas não quero que todos os links do menu visitado sejam vermelhos com contorno de caixa vermelha.

Obrigado por qualquer ajuda :)

Foi útil?

Solução

O mesmo que Joe Skora escreveu, mas mais específico:

.red {
    outline-color:red;
    outline-width:10px;
}

Agora você pode usar JavaScript (neste exemplo usando jQuery) no manipulador de cliques:

$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item

Outra maneira de fazer isso é o uso do seletor de pseudo: Target.
Para informações sobre isso: www.thinkvitamin.com

Outras dicas

Você pode fazer isso com CSS e HTML simples. Um método que geralmente usamos é ter um ID correspondente e seletor de classe para cada item de navegação.

O benefício disso é que você não precisa modificar seu Código do menu por página, você modifica o Página em si, o que você já estará fazendo, a menos que tudo esteja totalmente dinâmico.

Funciona assim:

<!-- ... head, etc ... -->
<body>

<ul class="nav">
    <li><a href="home.html" class="nav-home">Home</a></li>
    <li><a href="art.html" class="nav-art">Art</a></li>
    <li><a href="contact.html" class="nav-contact">Contact</a></li>
</ul>

<!-- ... more page ... -->

</body>

Então você configura alguns CSs como este:

#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }

Para alterar o item de menu "atual", basta atribuir o ID correspondente a um elemento mais alto na estrutura do documento. Normalmente eu adiciono aou003Cbody> marcação.

Para destacar a página "Art", tudo o que você precisa fazer é o seguinte:

<!-- The "Art" item will stand out. -->
<body id="NAV-ART">

<ul class="nav">
    <li><a href="home.html" class="nav-home">Home</a></li>
    <li><a href="art.html" class="nav-art">Art</a></li>
    <li><a href="contact.html" class="nav-contact">Contact</a></li>
</ul>

<!-- ... more page ... -->

</body>

Você pode fazer isso com as classes CSS. Por exemplo, um selecionado A classe pode identificar a loja atual, alterando a cor e o contorno. Em seguida, você pode alterar a seleção adicionando/removendo a classe do item de menu.

Dê uma olhada aqui, ele caminha por um tutorial sobre a construção de menus CSS.

Basicamente, isso não pode ser feito com o CSS sozinho, alguns scripts teriam que ocorrer (servidor ou lado do cliente, de preferência servidor). Como os outros sugeriram, adicione uma classe 'selecionada' (ou algo semelhante) ao link ativo e defina os estilos no CSS.

Por exemplo, os links:

 <a href="#">Eshop</a> | <a href="#" class="selected">Another eshop</a> | <a href="#">Another eshop</a>

Os estilos:

.selected {
     font-weight:bold;
     color:#efefef;
}

Os links seriam gerados dinamicamente, usando PHP, por exemplo:

 <?php
 foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
      echo '<a href="' . $url . '"' 
           . ($url == $_SERVER['REQUEST_URI'] ? ' class="selected"' : null) 
           . '>' . $title . '</a>'; 
 }

Se você está se mudando para uma nova página no mesmo Janela do navegador, Zack Mulgrew e Bobby Jack Ambos têm respostas excelentes.

Se você estiver abrindo o link da eShop em uma nova janela, não há muito que você possa fazer apenas com o CSS e gs tem uma resposta razoável, exceto pela escolha do nome da classe de (vermelho).

Qual é?

Até onde eu sei, você pode fazer isso apenas gerando código diferente para cada página (definindo uma classe diferente para a página atual) ou usando o JavaScript para alterar o menu após o carregamento da página.

você poderia usar um seletor de atributos como este ...

a[href^="http:\\www.EShop"]:visted { color: red; }

Ao fazer isso você está dizendo que qualquer link que tenha um href que comece com http:\Eshop.com e tenha sido visitado aplique este estilo.

Depende de como suas páginas são construídas, mas o CSS clássico foi fazer isso com um ID do corpo, bem como a cada link de navegação, para que você possa ter algo como:

eShop.html

<body id="eshop">
  <ul>
    <li><a href="" id="link-eshop">Eshop</a></li>
    <li><a href="" id="link-aeshop">Another eshop</a></li>
    <li><a href="" id="link-eshop-three">Another eshop</a></li>
  </ul>
</body>

e CSS correspondente:

#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
    color: red;
    outline: 1px solid red;
}

A navegação é consistente; Somente o ID do corpo muda de página para página.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top