Jump to content
Biel.

hide e show

Recommended Posts

Direto ao ponto. Pessoal quando clico no menu A , o conteúdoA fica visível. Gostaria que ao clicar no menu A o conteúdoA ficasse invisivel  e quando clicasse novamente  ficasse visivel.

Gostaria que o menu B tivesse o mesmo resultado que menu A , mas que funcionasse assim:

Quando menuB receber um click gostaria que exibisse o conteudoB  e  ocultasse o conteudoA 

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

<style>

h1{ padding:10px 20px; background:#D49F00; color:#434343; font-size:24px;}

.conteudo { display:none;  background-color:#D4DF00; margin:4px 0px 10px 0px;}

</style>

<script>

$(document).ready(function(){
						   
$("h1").click(function(){
	$(this).next('.conteudo').show(); 
	});

});

</script>

<div class="aprendiz" >

<h1 >menu A</h1>
    <div class='conteudo'>
        conteudo do menu A 
    </div>
</div>

<!--  ---------------------------------------------------  -->

<div class="aprendiz ">
<h1 >Menu B</h1>
    <div class='conteudo  '>
 conteudo do menu B
    </div>
</div>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Biel.
      Olá pessoal. Estou tentando exibir ocorrência contida na string.
      ex1 funciona normalmente  . 
      ex2 não funciona. Gostaria que ex2 funcionasse normalmente exibindo na tela o que existe na string.
      NOTA: Se não for possível encontrar a solução para ex2 usando (strpos) gostaria que a solução fosse encontrada de outras formas. Obrigado por sua atenção amigo!
      EX1 funciona normalmente <?php $varA = ('verde,amarelo,azul,cinza,preto'); $procurarPor = 'azul'; // verde,amarelo,azul,cinza,preto $resultado = strpos($varA , $procurarPor); if($resultado === false){ echo 'nao exibe azul'; } else{ echo 'existe azul'; } ?> ...
      EX2 NÃO funciona <?php $varA = ('verde,amarelo,azul,cinza,preto'); $procurarPor = 'azul'; // verde,amarelo,azul,cinza,preto $resultado = strpos($varA , $procurarPor); if($resultado == 'azul'){ echo 'exibe azul'; } elseif($resultado == 'verde'){ echo 'exibe verde'; } elseif($resultado == 'amarelo'){ echo 'exibe amarelo'; } else{ echo 'nao existe nada'; } ?>  
    • By Biel.
      Olá pessoal. direto ao ponto. Pessoal o exemplo abaixo exibe na tela n° 1 até nº 100 .  
      Existe alguma forma da $aprendiz ficar depois do fechamento da chave } ou seja fora  do for e exibir normalmente na tela tela n° 1 até nº 100
      <?php for($aprendiz=1; $aprendiz<=100; $aprendiz++){ //echo $a.'</br>' //} ?> <?php echo $aprendiz.'</br>' ;?> <?php } ?>  
    • By Biel.
      Direto ao ponto. Pessoal abaixo temos dois select . Gostaria que 
      ao selecionar item_aaa mostrasse no segundo select o item_verde ou 
      ao selecionar item_bbb mostrasse no segundo select o item_amarelo ou 
      ao selecionar item_ccc mostrasse no segundo select o item_azul 
       
      NOTA: Pessoal quero fazer este efeito com javascript, mas sem remover os itens do select HTML . Quero que o javascript ajude somente a fazer o efeito e não colocar os options value dentro do javascript .Obrigado por sua atenção amigo !
      <select name="letras" required > <option value=""></option> <option value="item_aaa"> aaa</option> <option value="item_bbb"> bbb</option> <option value="item_ccc"> ccc</option> </select> <select name="cores" required > <option value=""></option> <option value="item_verde"> verde</option> <option value="item_amarelo"> amarelo</option> <option value="item_azul">azul</option> </select>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Pessoal ao visualizar no browser a pagina 1 e em seguida clicar no link ir para pg 2, vou para a pg_2.php claro ! Uma vez na pg_2.php gostaria de clicar no link ir para pg 1 sem dar refresh na página. Alguém sabe como fazer isso ?
      <h2>página 1</h2> <h2> <a href="pg_2.php">ir para pg 2</a> </h2> <h2>página 2</h2> <h2> <a href="pg_1.php">ir para pg 1</a> </h2>  
    • By Biel.
      Direto ao ponto. Pessoal abaixo temos pg_home.php  e  pg_3.php . Temos dois codigo javascript abaixo que impede de voltar para (pagina anterior). Estou usando o primeiro código na pg_home.php para teste e está funcionando normalmente.
      Quero fazer o seguinte: 
      visualizo normalmente no browser(f12) a pg_home.php  e em seguida clico no link pg_3.php para visitar a pg_3.php claro ! 
      O codigo javascript IMPEDE este link <a href="javascript:history.go(-1);" style="font-size:30px;" >« voltar</a>de voltar para pagina anterior  e IMPEDE também a seta do browser de voltar para pagina anterior  ..
      Gostaria que o codigo javascript IMPEDISSE somente a seta do browser de voltar para pagina anterior  e não este link <a href="javascript:history.go(-1);" style="font-size:30px;" >« voltar</a>   
      A ideia pessoal é que este código <script>window.history.forward(1);</script>  continue impedindo normalmente de voltar para (pagina anterior) usando  a seta do browser, mas não
      impeça este codigo <a href="javascript:history.go(-1);" style="font-size:30px;" >&laquo; voltar</a> de voltar para página anterior
       
      Alguém sabe como fazer isso? Obrigado .
       
      Esta é a pg_home.php e tem este conteudo <script>window.history.forward(1);</script> <h2>pg home  </h2> <h2> <a href="pg_3.php">pg 3</a> </h2> ...
      Esta é a pg_3.php e tem este conteudo <h2>esta é a pagina 3 </h2> <a href="javascript:history.go(-1);" style="font-size:30px;" >« voltar</a> ...
      <!-- impede de voltar para pagina anterior --> <!-- <script>window.history.forward(1);</script> --> <!-- impede de voltar para pagina anterior --> <!-- <script scr="text/javascript"> function preventBack(){ window.history.forward(); } setTimeout("preventBack()",0); window.onunload=function(){null}; </script> -->  
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.