Display different contents when you select one of the buttons

Question

Display different contents when you select one of the buttons

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

0

How can I make% change with a push of a button? in case I have 3 buttons, the first one will cause the first div to be displayed, the second to show the second div and the third to make the third div appear.

Something similar to what this does, but can only appear one at a time, if the div 1, which is the one that appears by default, appears, 2 and 3 can not be displayed. >

$( "#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><divid="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>

link

javascript html jquery

asked by anonymous 10.11.2016 / 19:57

3 answers

2

With html5 came the date attributes. I think I should take advantage of this, I changed the html a bit:

$('.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><divclass="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 that instead of the first line $('.opcao:gt(0)').hide(); , you can add in css: #opcao2, #opcao3: {display: none;}

10.11.2016 / 20:03

0

One of the wonders of CSS or jquery selectors is that they can be grouped, and this is to avoid unnecessary code repetition.

Particularly I prefer to work with classes, but here's a way to select several different IDs with a simple selector:

$("[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><divid="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>

10.11.2016 / 22:11

Variable-sized object may not be initialized Problems with POST php

score 1 · Accepted Answer

You can leave display:none to the others in each 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><divid="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>