Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Eugênio Telles

[Resolvido] Ferramenta de abas

Por , em Javascript

Recommended Posts

Eugênio Telles    0

Eugênio Telles
Postado

pessoal, alguem sabe o nome desse efeito de aba presente no site da saraiva (http://www.livrariasaraiva.com.br/produto/produto.dll/detalhe?pro_id=2597890&ID=C91DA06D7D8091E0C2C0A0880) onde tem SINOPSE - CARACTERÍSTICAS DETALHADAS.

 

to querendo pesquisar isso, mas nao sei o nome da ferramenta pra pesquisar. se alguem puder apontar um caminho... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Vlw!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não cheguei à verificar, e ainda tô começando em JS.. mas acho que pela velocidade do carregamento, acho que é um simples display: none, block.

<html>
<head>
<style type="text/css">
ul li {
	float: left;
	cursor: pointer;
	background-color: #0f0;
	margin-right: 10px;

}
div {
	clear: both;
	width: 400px;
	margin-bottom: 10px;
	height: 200px;
}
#conteudo1 {
	background-color: #ff0;
}
#conteudo2 {
	background-color: #ff00ff;
}
#conteudo3 {
	background-color: #f00;
}
#conteudo4 {
	background-color: #00f;
}
</style>

<script type="text/javascript">
function mostrar(alvo){

	for(i=1; i<=4; i++){
		var qual = 'conteudo' + i;
		//alert(qual);
		var esconde = document.getElementById(qual);
		esconde.style.display = 'none';
	}


	var alvo = 'conteudo' + alvo;
	
	var elemento = document.getElementById(alvo);
	
	if(elemento.style.display=="none")
		elemento.style.display = 'block';
	else 
		elemento.style.display = 'none';
}
</script>

</head>
<body>
	<ul>
		<li onclick="mostrar('1')">Conteudo 1</li>
		<li onclick="mostrar('2')">Conteudo 2</li>
		<li onclick="mostrar('3')">Conteudo 3</li>
		<li onclick="mostrar('4')">Conteudo 4</li>
	</ul>
	<div id="conteudo1" style="display: block">
	Conteudo 1
	</div>

	<div id="conteudo2" style="display: none">
	Conteudo 2
	</div>

	<div id="conteudo3" style="display: none">
	Conteudo 3
	</div>

	<div id="conteudo4" style="display: none">
	Conteudo 4
	</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Nem cara... não cheguei à abrir o código... geralmente eles usam coisas complicadas pacas...

e BEM mais avançadas do que eu sei fazer em JS...

 

sou trainee de WS.. mas Javascript ainda to começando.. esse ai, eu mesmo fiz.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eugênio Telles    0

Eugênio Telles
Postado

Nem cara... não cheguei à abrir o código... geralmente eles usam coisas complicadas pacas...

e BEM mais avançadas do que eu sei fazer em JS...

 

sou trainee de WS.. mas Javascript ainda to começando.. esse ai, eu mesmo fiz.

 

eh, reparei depois q olhei direito, rs....

 

po, ele funciono isolado como html, mas qndo joguei na pagina q eu tinha feito, a coisa fico meio loka. vo tenta ajusta e jaja posto aki de novo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

po, ele funciono isolado como html, mas qndo joguei na pagina q eu tinha feito, a coisa fico meio loka. vo tenta ajusta e jaja posto aki de novo.

Provavelmente é por causa dos seletores que usei no CSS. Dá uma ajeitada no HTML, e no CSS que fiz...

 

"O nome" é navegação com abas mesmo. Existem alguns plugins com jQuery que fazem coisas bem legais... mas eu ainda to preferindo aprender, e fazer aos poucos com oq sei... coloca on line a tua página ai, que vejo oq precisa mudar pra funcionar esse meu código.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tranquilo Eugênio ^^

Eu aproveito pra responder essas perguntas aqui, pq ai eu aprendo tb.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito