I need to change the background color of a link in a Nav tag dynamically by clicking on it

Question

I’m trying to learn HTML and CSS and came across this problem: I need the background color of the link to look like this even when I click off the Nav Print of Nav bar. I’ve tried using some CSS pseudo-classes to do this but when I click off the Nav the background color of the link goes back to previous.

**Parte do código HTML:**

 <nav class="nav-group">
        <h5 class="nav-group-title">Opções</h5>
        <a href="#!cadastro" class="nav-group-item" id="Cadastro">
          <span class="icon icon-user-add"></span>
          Cadastrar Funcionários
        </a>
        <a href="#!cadastroProd" class="nav-group-item" id="CadProd">
          <span class="icon icon-bag"></span>
          Cadastrar Produtos
        </a>
        <a href="#!listarProd" class="nav-group-item" id="ListProd">
          <span class="icon icon-doc-text"></span>
          Listar produtos
        </a>
        <a href="#!status" class="nav-group-item" id="Status">
          <span class="icon icon-retweet"></span>
          Status de funcionamento
        </a>
        <a href="#!calcular" class="nav-group-item" id="Calcular">
          <span class="icon icon-chart-bar"></span>
          Calcular comissão
        </a>
        <a href="#!removeFunc" class="nav-group-item" id="RemoveFunc">
          <span class="icon icon-attention"></span>
          Remover funcionário
        </a>
      </nav>

     **Código css:**

      .nav-group {
      font-size: 14px;
      }

      .nav-group-item {
        padding: 2px 10px 2px 25px;
        display: block;
        color: #333;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }

       a.nav-group-item:hover{
        background-color: #dbeaf1;
       }

       a.nav-group-item:focus{
        background-color: #c9cbcc;
       }

Answer 1

You can change the css of this link with a javascript or Jquery (simpler):

$('#Cadastro')on('click', function(){
    $(this).css('background-color', '#C9CBCC');
});

#C9CBCC is the exact background color of your print in "Register Employees".

with Jquery you will be able to play to give effect in a simple way (careful with the load, although later will cachear in the browser)!

Answer 2

You have to set a background for when the link is active, use this.

a:active { background-color: Yellow; }