-2

Gostaria de exibir apenas a div correspondente ao botão clicado.

Por padrão a tab tab-dados inicia ativa, mas se o botão name="hidraulica" for clicado esconde a div tab-dados e aparece a tab-hidraulica. Assim por diante.

Como posso fazer isso?

Obrigado

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

0

1 Resposta 1

2

Eu faria dessa maneira

$('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

    })
})

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .