1

Tenho uma linha com vários links, cada link é uma letra do abecedário, gostava de saber se há alguma forma de quando eu clico numa letra mudal o estilo ou apenas tornar o link active sem dar refresh na página.

inserir a descrição da imagem aqui

Esta é a linha com os links

O meu código é este:

<div class="row pl-0 ml-0 rowPesquisa justify-content-center">
   <div class="text-center ml-0 pl-0 colPesquisa">
      <a href="#" class="">A</a>
      <a href="#" class="">B</a>
      <a href="#" class="">C</a>
      <a href="#" class="">D</a>
      <a href="#" class="">E</a>
      <a href="#" class="">F</a>
      <a href="#" class="">G</a>
      <a href="#" class="">H</a>
      <a href="#" class="">I</a>
      <a href="#" class="">J</a>
      <a href="#" class="">K</a>
      <a href="#" class="">L</a>
      <a href="#" class="">M</a>
      <a href="#" class="">N</a>
      <a href="#" class="">O</a>
      <a href="#" class="">P</a>
      <a href="#" class="">Q</a>
      <a href="#" class="">R</a>
      <a href="#" class="">S</a>
      <a href="#" class="">T</a>
      <a href="#" class="">U</a>
      <a href="#" class="">V</a>
      <a href="#" class="">W</a>
      <a href="#" class="">X</a>
      <a href="#" class="">Y</a>
      <a href="#" class="">Z</a>
   </div>
</div> 

1 Resposta 1

2

Sem JS acho difícil, mas só com CSS tem esse workaround, vc vai ter que colocar o texto do link dentro de uma tag span, e vai usar a pseudo classe :target, para o link que for clicado marca o span. tipo assim a span:target, tb vai ser preciso colocar um ID no span para poder pega-lo com o :target do href

Veja o exemplo para entender melhor

a span:target {
    color: red;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
       
<div class="container">
    <div class="row pl-0 ml-0 rowPesquisa justify-content-center">
        <div class="text-center ml-0 pl-0 colPesquisa">
            <a href="#n1" class=""><span id="n1">A</span></a>
            <a href="#n2" class=""><span id="n2">B</span></a>
            <a href="#n3" class=""><span id="n3">C</span></a>
        </div>
    </div> 
</div>

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 .