Display only the div corresponding to the clicked button

Question

I would like to display only the div corresponding to the button clicked.

By default a tab tab-dados starts active, but if the button name="hidraulica" is clicked hides the div tab-dados and appears to tab-hidraulica. So on.

How can I do that?

Thank you

.tab-dados, .tab-hidraulica, .tab-civil, .tab-eletrica, .tab-comentarios {
  display: none;
  background: #3880ff;
}

.active{
  display: block; 
}

footer{
  margin-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="app">

  <div class="tab-dados active">
    Dados
  </div>

  <div class="tab-hidraulica active">
    hidraulica
  </div>

  <div class="tab-civil">
    civil
  </div>

  <div class="tab-eletrica">
    eletrica
  </div>

  <div class="tab-comentarios">
    comentarios
  </div>


  <footer>
    <button class="btn-tab blue bd1" type="button" name="dados">Dados</button>
    <button class="btn-tab blue bd1 " type="button" name="hidraulica">hidraulica</button>
    <button class="btn-tab blue bd1 " type="button" name="civil">civil</button>
    <button class="btn-tab blue bd1 " type="button" name="eletrica">eletrica</button>
    <button class="btn-tab blue" type="button" name="comentarios">comentarios</button>
  </footer>

Answer 1

I’d do it that way

$('footer button').each(function(e){ // Seleciono os botoes do <footer>

    $(this).click(function(e){ // Para cada botão adiciono um evento de click

        let nome = $(this).attr('name'); // Pega o nome do botão clicado

         $('.active').removeClass('active');
        // Removo a classe active das divs ativas

        $(`.tab-${nome}`).addClass('active'); 
        // Adiciono a classe active na div referente ao name do botão

    })
})