How do I make an "a" tag active without refreshing the page?

Question

I have a line with several links, each link is an alphabet letter, I wonder if there is any way when I click on a letter changing the style or just make the link active without refreshing the page.

This is the line with the links

This is my code:

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

Answer 1

No JS I find difficult, but only with CSS has this workaround, you’ll have to put the link text inside a tag span, and will use the pseudo class :target, for the link that is clicked marks the span. kind of a span:target, You will need to put an ID on span so I can catch him with the :target of href

See the example to better understand

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>