Ir para conteúdo
geoleandro

Abrir Divs em sequência

Recommended Posts


<!DOCTYPE html>
<html>
<head>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>

<div id="dq1"style="display:block"> <br><br>
Conteúdo da Div 1
</div>


<br><br>
<span id = "bdq2"  style="display:block" onclick = "divMostrar(2)">Próximo</span><br><br>

<div id="dq2"style="display:none"> 
Conteúdo da Div 2
</div>


<br><br>
<span id = "bdq3"  style="display:none"   onclick = "divMostrar(3)">Próximo</span><br><br>

<div id="dq3"style="display:none"> 
Conteúdo da Div 3
</div>


<br><br>
<span id = "bdq4"  style="display:none"   onclick = "divMostrar(4)">Próximo</span><br><br>

<div id="dq4"style="display:none"> <br><br>
Conteúdo da Div 4
</div>


<br><br>
<span id = "bdq5"  style="display:none"   onclick = "divMostrar(5)">Próximo</span><br><br>

<div id="dq5"style="display:none"> <br><br>
Conteúdo da Div 5
</div>
<br><br>


<span id = "bdq6"  style="display:none"   onclick = "divMostrar(6)">Próximo</span>

<div id="dq6"style="display:none"> 
Terminou!
</div>



<script>

function divMostrar(qnum){

     		
	
	
	if (document.getElementById("bdq2").style.display='block'&& qnum==2) {
	
	document.getElementById("dq2").style.display='block';
	document.getElementById("bdq2").style.display='none';
	document.getElementById("bdq3").style.display='block';
	 }
	if (document.getElementById("bdq3").style.display='block' && qnum==3){
	
	document.getElementById("bdq3").style.display='none';
	document.getElementById("dq3").style.display='block';
	 document.getElementById("bdq4").style.display='block';
	 }
	 
	if (document.getElementById("bdq4").style.display='block' && qnum==4){
	document.getElementById("bdq4").style.display='none';
	document.getElementById("dq4").style.display='block';
	 document.getElementById("bdq5").style.display='block';
	
	}
	if (document.getElementById("bdq5").style.display='block' && qnum==5){
	
	document.getElementById("bdq5").style.display='none';
	document.getElementById("dq5").style.display='block';
	 document.getElementById("bdq6").style.display='block';
	}
	if (document.getElementById("bdq6").style.display='block' && qnum==6){
	
	document.getElementById("bdq6").style.display='none';
	document.getElementById("dq6").style.display='block';
	 
	
	}
}




</script>


</body>
</head>
</html>

De que outro modo é possível programar para abrir essas Divs em sequência? Além do uso de IFs e else em JavaScript.

Compartilhar este post


Link para o post
Compartilhar em outros sites
<style>
    .exemplo {
        display: none
    }
    .exemplo:nth-child(1), .exemplo.mostrar {
        display: block
    }
</style>

<div class="exemplo">
    <button onclick="MostrarProximo(this)">Mostrar Próximo</button>
    Primeiro
</div>
<div class="exemplo">
    <button onclick="MostrarProximo(this)">Mostrar Próximo</button>
    Segundo
</div>
<div class="exemplo">
    <button onclick="MostrarProximo(this)">Mostrar Próximo</button>
    Terceiro
</div>

<script>
    // "parametro" nada mais é que o botão clicado
    function MostrarProximo(parametro) {
        var oculto = parametro.parentNode; // Obter qual é o elemento pai do botão
        var proximo = oculto.nextElementSibling; // Obter qual é o elemento seguinte ao pai
        if (!proximo.classList.contains('mostrar')) { // Verificar se o seguinte já foi mostrado
            proximo.classList.add('mostrar'); // Mostrar o seguinte
        }
    }
</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por Giovanird
      Olá a todos!
      tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
      Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script:
      <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="29">29</div> <div class="planos" id="1" value="55">55</div> <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="63">63</div> <div class="planos" id="1" value="55">55</div> <script type="text/javascript"> var valueElement = document.getElementsByClassName('.planos').getAttribute('value'); console.log(valueElement); if (valueElement >= "70") { document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50'; } else if (valueElement >= "50" && valueElement <= "69") { document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00'; } else { document.getElementsByClassName('.planos').style.backgroundColor == '#f44336'; } </script>  
       
    • Por GOD
      Quero um código div ou qualquer outra forma, para atingi esse resultado do link
       https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal
       
      Para ficar nesse local.
      https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view
       
      Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.
       
       
      Enfim espero uma ajuda sobre como posso fazer isso
       
       
    • Por rcsbnu27
      Estou tentando ajudar um amigo a desenvolver seu site pessoal ele me passou um modelo, onde não estou conseguindo fazer um link de menu quando clicar nos anos iniciais ir para as turmas dos anos iniciais no menu atividade educacionais, segue em anexo o código. Endereço para ter ideia do que estou falando: https://www.profrodrigo.com/temporario/index.html. Nesta parte:
      HTML
      <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#anosiniciais" > <img src="images/anos/anosiniciais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#anosfinais" > <img src="images/anos/anosfinais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="section news-section" id="anosiniciais"> <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/pres.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/1sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/2sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/3sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/4sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div>

      <div class="section news-section" id="anosfinais">
      <div class="container">
      <div class="row">
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/5sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.ebmalbertostein.com" target="_blank">
      <img src="images/turmas/6sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.profgarrido.com" target="_blank">
      <img src="images/turmas/7sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/8sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/9sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      </div>
      </div>
      </div>
    • Por lezão
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.