1

Bom, precisei fazer com que ao clicar em um botão mostrasse as div's e se ao clicar em outro botão e a alguma div estiver aparecendo(display:block;) iria adquirir um display: none; foi o que fiz no código a baixo:

function movel(){
	var divMovel = document.getElementById("divMovel");

	if(divMovel.style.display == "none" || divRoupa.style.display == "block" || divOutros.style.display == "block" || divCozinha.style.display == "block"){
		divMovel.style.display = "block";
		divRoupa.style.display = "none";
		divOutros.style.display = "none";
		divCozinha.style.display = "none";
	}

	else{
		divMovel.style.display = "none";
	}
};

function roupa(){
	var divRoupa = document.getElementById("divRoupa");
	
	if(divRoupa.style.display == "none" || divMovel.style.display == "block" || divOutros.style.display == "block" || divCozinha.style.display == "block" ){
		divMovel.style.display = "none";
		divOutros.style.display = "none";
		divCozinha.style.display = "none";
		divRoupa.style.display = "block";
	}
	else{
		divRoupa.style.display = "none";
	}
};

function outros(){
	var divOutros = document.getElementById("divOutros");
	
	if(divOutros.style.display == "none" || divRoupa.style.display == "block" || divMovel.style.display == "block" || divCozinha.style.display == "block" ){
		divRoupa.style.display = "none";
		divMovel.style.display = "none";
		divCozinha.style.display = "none";
		divOutros.style.display = "block";
	}
	else{
		divOutros.style.display = "none";
	}
};

function cozinha(){
	var divCozinha = document.getElementById("divCozinha");
	
	if(divCozinha.style.display == "none" || divRoupa.style.display == "block" || divMovel.style.display == "block" || divOutros.style.display == "block"){
		divRoupa.style.display = "none";
		divMovel.style.display = "none";
		divOutros.style.display = "none";
		divCozinha.style.display = "block";
	}
	else{
		divCozinha.style.display = "none";
	}
};
.itens{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: white;
}
.moveis{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: green;
	display: none;
}
.roupa{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: blue;
	display: none;

}
.outros{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: red;
	display: none;

}
.cozinha{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: black;
	display: none;

}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div class="boxGeral">
		<aside class="classes">
			<ul>
        <!--Os botões -->
				<li><button id="linkMovel" onclick="movel()">Móveis</button></li>
				<li><button id="linkRoupa" onclick="roupa()">Roupas</button></li>
				<li><button id="linkOutros" onclick="outros()">Outros</button></li>
				<li><button id="linkCozinha" onclick="cozinha()">Itens de Cozinha</button></li>
			</ul>
		</aside>
    <!--As div que irão aparecer -->
		<article class="itens">
			<div class="moveis" id="divMovel">
				asdasdasd
			</div>
			<div class="roupa" id="divRoupa">
				333333
			</div>
			<div class="outros" id="divOutros">
				333333
			</div>
			<div class="cozinha" id="divCozinha">
				333333
			</div>
		</article>
	</div>
</body>
</html>

Porém por algum motivo o script só é executado quando se clica duas vezes sobre o botão, quero saber a solução que fará com que seja aparecido assim quando clicar.
OBS: Utilizando somente HTML, CSS e JS(Sem jQuery).Se possível mostrar também uma solução com jQuery utilizando algum efeito como o toggle. Agradecido.

1 Resposta 1

1

O problema que está a acorrer é que apesar de os elementos começarem escondidos a propriedade display.style de cada um deles começa vazia, depois passa a none e só então mostra.

Esse é o motivo de ter de dar dois cliques para mostrar.

No entanto, todo o código é um pouco repetido. Uma melhor solução para o problema seria:

var divs = [
  document.getElementById("divMovel"),
  document.getElementById("divRoupa"),
  document.getElementById("divOutros"),
  document.getElementById("divCozinha")
]; //criar um array com todos os divs a mostrar

divs.forEach(x => x.style.display = "none"); //iniciar todos escondidos

//funcao agora para todos os botoes, que recebe a posicao do div a controlar
function ativar(posicao){      
  if (divs[posicao].style.display == "none"){ 
    divs.forEach(x => x.style.display = "none"); //esconde todos os outros
    divs[posicao].style.display = "block"; //mostra este
  }
  else {
    divs[posicao].style.display = "none";
  }
}
.itens{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: white;
}
.moveis{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: green;
	display: none;
}
.roupa{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: blue;
	display: none;

}
.outros{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: red;
	display: none;

}
.cozinha{
	position: relative;
	margin: auto;
	width: 80%;
	height: 600px;
	background-color: black;
	display: none;

}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div class="boxGeral">
		<aside class="classes">
                        <!--Os botões -->
			<ul>       
				<li><button id="linkMovel" onclick="ativar(0)">Móveis</button></li>
				<li><button id="linkRoupa" onclick="ativar(1)">Roupas</button></li>
				<li><button id="linkOutros" onclick="ativar(2)">Outros</button></li>
				<li><button id="linkCozinha" onclick="ativar(3)">Itens de Cozinha</button></li>
			</ul>
		</aside>

                <!--As div que irão aparecer -->
		<article class="itens">
			<div class="moveis" id="divMovel">
				asdasdasd
			</div>
			<div class="roupa" id="divRoupa">
				333333
			</div>
			<div class="outros" id="divOutros">
				333333
			</div>
			<div class="cozinha" id="divCozinha">
				333333
			</div>
		</article>
	</div>
</body>
</html>

O que implicou mudar também a chamada a função no html para onclick="ativar(0)" para o primeiro li, e assim sucessivamente para os restantes.

JQuery

Para jquery não seriam necessário os atributos onclick nos li, assim como não seria necessário um array para controlar os vários elementos.

$(function(){
    $(".classes li").click(function(){
      //construir a posição clicada com base no li
      var indice = $(this).index() + 1; 
      //ir buscar o elemento correspondente com base no seletor nth-child
      var elemento = $(".itens > div:nth-child(" + indice + ")"); 

      if (elemento.is(":visible") === true) { //ver se esta visível
        elemento.hide(); //esconder o elemento corrente se estava visível
      }
      else {
        $(".itens > div").hide(); //esconder todos
        elemento.show(); //mostrar o que interessa
      }
    });
});
4
  • Muito bom, porém quando eu tirava os "else" das minhas funções parava de funcionar o script, seria por qual motivo ? 4/07/2017 às 23:24
  • 1
    Sem o else o elemento nunca ia a display.none, logo também depois não conseguia voltar a display.block pela lógica dos ifs
    – Isac
    4/07/2017 às 23:45
  • Por algum motivo eu copiei o seu código tanto do jQuery quanto o outro e não funcionou mas consegui resolver apenas adicionando um .style.display = "none", depois da declaração de cada variável de cada função fazendo com que eles já iniciem como none, além de poder tirar o else. 5/07/2017 às 0:40
  • O de JQuery para funcionar tem de estar dentro de $(function(){ });, que é o que garante que o código apenas é interpretado depois de o html estar construído. Quanto ao de Js normal é estranho porque o snippet funciona na perfeição.
    – Isac
    5/07/2017 às 0:56

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 .