0

Como posso fazer com que a div troque ao apertar um botão? no caso eu tenho 3 botoes, o primeiro vai fazer com que seja exibida a primeira div, o segundo com que apareça a segunda div e o terceiro fazer com que apareça a terceira div.

Algo parecido com o que isso faz, mas só pode aparecer um por vez, se a div 1, que é a que fica aparecendo por padrao, aparecer, a 2 e a 3 não podem ser exibidas.

$( "#Clique1" ).click(function() {
  $("#opcao1").css("display","block");
});
$( "#Clique2" ).click(function() {
  $("#opcao2").css("display","block");
});
$( "#Clique3" ).click(function() {
  $("#opcao3").css("display","block");
});
#opcao2{
    display:none;
}
#opcao3{
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="opcao1">
    Eu apareço
</div>
<div id="opcao2">
    Eu irei aparecer se ele sumir
</div>
<div id="opcao3">
    Eu também irei aparecer se ele sumir
</div>
<button id="Clique">troca para a opcao1</button>
<button id="Clique2">troca para a opcao2</button>
<button id="Clique3">troca para a opcao3</button>

http://jsfiddle.net/fjfe3v4g/

3 Respostas 3

2

Com html5 veio os atributos data. Acho que se devia aproveitar disso, alterei um pouco o html:

$('.opcao:gt(0)').hide();
$('[data-opt]').on('click', function() {
  var optId = $(this).data('opt');
  $('.opcao').hide();
  $(optId).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="opcao" id="opcao1">
    Eu apareço
</div>
<div class="opcao" id="opcao2">
    Eu irei aparecer se ele sumir
</div>
<div class="opcao" id="opcao3">
    Eu também irei aparecer se ele sumir
</div>
<button data-opt="#opcao1" id="Clique">troca para a opcao1</button>
<button data-opt="#opcao2" id="Clique2">troca para a opcao2</button>
<button data-opt="#opcao3" id="Clique3">troca para a opcao3</button>

Not que em vez da primeira linha $('.opcao:gt(0)').hide();, pode adicionar no css: #opcao2, #opcao3: {display: none;}

1

Você pode deixar display:none para as demais em cada click:

$( "#Clique1" ).click(function() {
  $("#opcao1").css("display","block");
  $("#opcao2").css("display","none");
  $("#opcao3").css("display","none");
});
$( "#Clique2" ).click(function() {
  $("#opcao1").css("display","none");
  $("#opcao2").css("display","block");
  $("#opcao3").css("display","none");
});
$( "#Clique3" ).click(function() {
  $("#opcao1").css("display","none");
  $("#opcao2").css("display","none");
  $("#opcao3").css("display","block");
});
#opcao2{
    display:none;
}
#opcao3{
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="opcao1">
    Eu apareço
</div>
<div id="opcao2">
    Eu irei aparecer se ele sumir
</div>
<div id="opcao3">
    Eu também irei aparecer se ele sumir
</div>
<button id="Clique">troca para a opcao1</button>
<button id="Clique2">troca para a opcao2</button>
<button id="Clique3">troca para a opcao3</button>

2
  • isso mesmo, obrigado, ainda sou leigo com javascript. Assim que der eu já marco a resposta com correta Commented 10/11/2016 às 19:02
  • Entendi. De nada :)
    – BrTkCa
    Commented 10/11/2016 às 19:02
0

Uma das maravilhas dos seletores CSS ou jquery, é que eles podem ser agrupados, e isso serve para evitar a repetição de código desnecessariamente.

Particularmente eu prefiro sempre trabalhar com classes, mas segue abaixo uma forma de selecionar vários IDs diferentes com um seletor simples:

$("[data-target]").click(function() {
  $("[id^=opcao]").hide(); // ocultar todos os IDs iniciados por opcao
  $($(this).data('target')).show(); // exibir o elemento indicado no atributo data-target
});
#opcao2,
#opcao3 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="opcao1">
  Eu apareço
</div>
<div id="opcao2">
  Eu irei aparecer se ele sumir
</div>
<div id="opcao3">
  Eu também irei aparecer se ele sumir
</div>
<button data-target="#opcao1">troca para a opcao1</button>
<button data-target="#opcao2">troca para a opcao2</button>
<button data-target="#opcao3">troca para a opcao3</button>

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 .