Abas CSS/Javascript

[Murilo C. Cardoso 0]

estou tentando construir uma navegação com abas, mas estou com alguns poblemas...

sei que tenho que usar a função getElementById().style.display='block' ..

estou fazendo um aqui com 3 abas, e estou fazendo o seguinte :

 

<style type="text/css">	body { margin: 0, padding: 0; }		table { border: 1px solid #000; background-color: #cc9; }		table tr td { border: 1px solid #000; background-color: #cc9; font-size: small; }		#abas { top:10px; left: 30px; position: absolute; }				#aba1 { display: block; background-color: #cc9; width: 300px; height: 200px; border: 1px solid #000; top: 30px; left:30px; position: absolute; }		#aba2 { display: none; background-color: #cc9; width: 300px; height: 200px; border: 1px solid #000; top: 30px; left:30px; position: absolute; }		#aba3 { display: none; background-color: #cc9; width: 300px; height: 200px; border: 1px solid #000; top: 30px; left:30px; position: absolute; }	</style><div id="abas">	<table> <tr>		<td> <a href="javascript://; onClick="document.getElementById('aba1').style.display='block';"> 1 </a> </td>		<td> <a href="javascript://; onClick="document.getElementById('aba2').style.display='block';"> 2 </a> </td>		<td> <a href="javascript://; onClick="document.getElementById('aba3').style.display='block';"> 3 </a> </td>	</tr> </table></div><div id="aba1"> aba1 </div><div id="aba2"> aba2 </div><div id="aba3"> aba3 </div>

e não está funcionando, alguém poderia dar um help por favor? muito brigado!

[Giovani 104]

Ae Murilo,

 

Não entendo muito de javascript, mas esse menu em abas que o Bruno fez não te ajuda???

Ali tá bem explicadinho...e funciona muito bem!

 

Abraços!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Davis 0]

Eu fiz isso ontem. Vou postar o código e em seguida a explicação pra cada um.

 

HTML

<a href="#" id="tabevento" class="ligado" onclick="doClick(0, 3, 'evento')">Aba 1</a> | <a href="#" id="tabevento" class="desligado" onclick="doClick(1, 3, 'evento')">Aba 2</a> | <a href="#" id="tabevento" class="desligado" onclick="doClick(2, 3, 'evento')">Aba 3</a><div id="evevento" class="ligado" style="width: 97%; display:block;" align="center">	Primeira aba</div><div id="evevento" class="desligado" style="width: 97%; display:none;" align="center">	Segunda aba</div><div id="evevento" class="desligado" style="width: 97%; display:none;" align="center">	Terceira aba</div>

Os links chamam a função criada abaixo. A síntaxe é doClick(aba clicada, quant. de abas, nome do objeto)

Os links tem nome de tabevento enquanto as divs de evevento. Nomes doidos... Coisa minha... :D

 

java script:

<script language="JavaScript">		function doClick(index, numTabs, id) {			document.all("tab" + id, index).className = "ligado";			for (var i=1; i < numTabs; i++) {				document.all("tab" + id, (index + i) % numTabs).className = "desligado";			}			document.all("ev" + id, index).style.display = "block";			for (var j=1; j < numTabs; j++) {				document.all("ev" + id, (index + j) % numTabs).style.display = "none";			}		}	</script>

Explicação: Aqui a função. Ela pega a aba clicada (index) e ativa a class "ligado". Em seguida ela vai setando a class "desligado" para todas as outras. O mesmo ocorre com o display. Ela seta "block" pra clicada e "none" para as outras. Isso faz com que as outras fiquem invisíveis.

 

CSS

.ligado {	border: solid 1px #FFDDAA;	background: #FFEEBB;	padding: 2px;}.desligado {	border: solid 1px #FFDDAA;	background: #FFFFFF;	padding: 2px;}

Explicação: Só cores pra dar um efeito visual razoável.

 

 

Esse é só o rascunho do que eu fiz pro meu site. Espero que tenha ajudado. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif