Efeito em abas?

[IsmaelAndres 0]

Olá.

 

Estou montando um site e preciso colocar um efeito para organizar melhor o conteúdo em uma página.

Visitando o site da globo, achei um esquema bem legal, mas não sei como se chama e muito menos como se faz.

 

Link Aqui!

Abaixo da noticia tem uma parte "saiba mais", abaixo disso tem a barra que quero. Onde diz: versão para impressão, enviar a um amigo, compartilhar, etc.

 

Quando clicar em um desses links uma div desce mostrando o conteúdo, quando se clica em outro link ao lado, esconde-se o que estava mostrando e carrega a próxima parte.

 

Alguem sabe como faz? ou como se chama?

 

Valew

[mangakah 217]

Aí eles não usaram ajax, provavelmente é algum recurso de controle de saída/buffer...

 

...este recurso se chama tableless e pode ser feito com controle de saída(com alguma linguagem dinamica) , com AJAX ou com DHTML.

[IsmaelAndres 0]

Obrigado pela resposta mas até onde eu saiba tableless significa fazer site semanticamente corretos, ou seja, não organizar o conteúdo em tabelas. Também percebi que não é feito em ajax mas gostaria de saber como se faz ou como se chama.

 

Alguem mais aí?

[nknk 3]

Algumas divs se aparacem(display:block) e outras(display:none) não conforme se clica nos links, o efeito é este acredito. A parte do celular é ajax.

[desisto 0]

as div tem estilo - display:none e a funcao que abre é essa onclick="AlternarAbas(id,'box-celular');return false;"

abre a aba celular e fecha as outras

 

uma das formas de fazer

 

function abrecel(){

...display:none em todas

...display:block no id cell

}

[IsmaelAndres 0]

Obrigado aí.

 

Mas eu não manjo quase nada de javascript, alguem consegue fazer pra mim um código de exemplo de 3 abas?? Pode ser bem simples coloca qualquer texto como conteúdo nas abas.

 

Estou precisando muito... valew

[desisto 0]

dei uma comentada no codigo pra você entender

usando a propriedade className, você pode mudar o estilo, tipo on / off

 

<script>
function muda_aba(aba){
	var nAbas="4";// total de abas - 1, pq a contagem do loop comeca em 1 e nao em 0
	for(var i="1";i<nAbas;i++){
		var id=i;
// aqui transforma todas as abas em 'off' mudando a class do objeto 
//	document.getElementById('aba_'+id).className='aba_'+id+"_off";
// aqui transforma a aba selecionada em 'on' mudando a class do objeto tambem
//	document.getElementById('aba_'+aba).className='aba_'+aba+"_on";
	document.getElementById('aba_'+id).style.display="none";
	document.getElementById('aba_'+aba).style.display="block";
	}
}
</script>

<a id="1" href="#" onClick="muda_aba(this.id); return false;">1</a>
<a id="2" href="#" onClick="muda_aba(this.id); return false;">2</a>
<a id="3" href="#" onClick="muda_aba(this.id); return false;">3</a>

<div id="aba_1">aba 1</div>
<div id="aba_2" style="display:none">aba 2</div>
<div id="aba_3" style="display:none">aba 3</div>

 

abracos

[mangakah 217]

Opa Ismael, desculpe aí, na verdade eu queria dizer TabLess que era script que fazia algo semelhante á isso. Pesquisando por DHTML Tabs eu encontrei este script que acho que deve solucionar o seu problema:

 

http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

[IsmaelAndres 0]

Congratulações a desisto e mangakah

 

Caras, gostei dos exemplos, vou testar isso ainda hoje.

 

Valew

[desisto 0]

estamos ai pra isso

[]s