2

Desejo fazer uma espécie de hide and show em divs, com jquery. Porém as alterações não são realizadas no caso de ida e volta.

$(function() {

  $('#red').click(function() {
    $('.red').css('display', 'block');
    $('.blue').css('display', 'none');
    $('.green').css('display', 'none');
  })

  $('#blue').click(function() {
    $('.red').css('display', 'none');
    $('.blue').css('display', 'block');
    $('.green').css('display', 'none');
  })

  $('#green').click(function() {
    $('.red').css('display', 'none');
    $('.blue').css('display', 'none');
    $('.green').css('display', 'block');
  })

})
.red {
  width: 32px;
  height: 32px;
  background-color: red;
}

.blue {
  width: 32px;
  height: 32px;
  background-color: blue;
  display: none;
}

.green {
  width: 32px;
  height: 32px;
  background-color: green;
  display: none;
}

.links {
  display: inline-block;
  margin-top: 50px;
}
<!DOCTYPE html>
<html>

<head>
  <title>
    titulo
  </title>
  <script src="jv/java.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="jv/jquery-3.5.1.js"></script>
  <script type="text/javascript" src="jv/functions.js"></script>
</head>

<body>
  <div class="red">
    <div class="links">
      <a href="#" id="red">red</a>
      <a href="#" id="blue">blue</a>
      <a href="#" id="green"> green</a>
    </div>
  </div>
  <!-- red -->

  <div class="blue">
    <div class="links">
      <a href="#" id="red">red</a>
      <a href="#" id="blue">blue</a>
      <a href="#" id="green"> green</a>
    </div>
  </div>
  <!-- blue -->

  <div class="green">
    <div class="links">
      <a href="#" id="red">red</a>
      <a href="#" id="blue">blue</a>
      <a href="#" id="green"> green</a>
    </div>
    <!-- green -->
</body>

</html>

2

1 Resposta 1

0

Temos duas formas de tratar esse problema, então vamos lá

Primeira:

Vamos criar uma classe no nosso css

    .hide{ 
        display: none; 
    }

E no jquery

    $("#red").click( ()=> {
       $(this).toggleClass("hide");
    });

Isso pode ser usado para todos os seus elementos somente trocando o $("#idDoElemento"), ele irar colocar ou retirar a classe que esconde os elementos, sem ter que você ficar rescrevendo toda hora as mesmas coisas.

Segunda:

Não é muito elegante, e não aconselho, mas resolve o seu problema.

    $("#red").click( ()=> {
       $(this).show();
       $('.red').hide();
       /* Todos os elementos que você quer esconder */
    });

Se você é iniciante, deixo a observação que não é muito aconselhavel aprender Jquery em 2020, é mais proveitoso ir para o vanila.js

Material: https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico

1
  • Entendi cara, e obrigado pela dica. 29/10/2020 às 14:46

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 .