Ir para conteúdo

POWERED BY:

Arquivado

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

Igor FV

Problemas com ABAS, alguém pode me r?

Por , em Javascript

Recommended Posts

Igor FV    0

Igor FV
Postado

Amigos estou tentando fazer abas, mas só consegui fazer até a terceira, quando tento adicionar mais abas não funciona corretamente.Alguém poderia me ajudar, pois quando clico na quarta aba a aba que abre é a segunda, abaixo segue o codigo, oq esta errado?

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title></title><style type="text/css">.ligado { border: solid 1px #FFDDAA; background: #FFEEBB; padding: 2px;}.desligado { border: solid 1px #FFDDAA; background: #FFFFFF; padding: 2px;}</style><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></head><body><a href="#" id="tabevento" class="ligado" onclick="doClick(0, 3, 'evento')">Dados do Usuário</a> <a href="#" id="tabevento" class="desligado" onclick="doClick(1, 3, 'evento')">ERP</a> <a href="#" id="tabevento" class="desligado" onclick="doClick(2, 3, 'evento')">STV</a><a href="#" id="tabevento" class="desligado" onclick="doClick(1, 3, 'evento')">SCC</a><div id="evevento" class="ligado" style="width: 97%; display:block;" align="center"> Primeira aba</div><div id="evevento" class="ligado" style="width: 97%; display:none;" align="center"> Segunda aba</div><div id="evevento" class="ligado" style="width: 97%; display:none;" align="center"> Terceira aba</div><div id="evevento" class="ligado" style="width: 97%; display:none;" align="center"> Quarta aba</div></body></html>

Vlw amigos...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

o problema tá aqui:

 

function doClick(index, numTabs, id) {

e você tá passando:

 

onclick="doClick(0, 3, 'evento')"

esse "3" tem que ser o número de abas que você quer, ou seja, "4", entendeu?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Obrigadão por ajudar aqui no fórum de WS tb PKTIAGO!!!

que isso cara, estamos ai para isso, um ajudar o outro, aliás este tópico poderia ser movido para JavaScript, o que acha?Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

que isso cara, estamos ai para isso, um ajudar o outro, aliás este tópico poderia ser movido para JavaScript, o que acha?

Gostei da idéia :P[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

wren    0

wren
Postado

Como o document.all não funfa no FireFox, eu alterei o script:

 

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title></title><style type="text/css">.ligado {background: #FFFFFF;border-top: 1px solid #CCCCCC;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;}.desligado {border: none;background: #FFFFFF;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;}.conteudo{	background: #FFF; /*#FFF3B3;*/	color: #000;	padding: 0.3em;	width: 600px;}</style><script language="JavaScript">function doClick(index, numTabs, id) {document.getElementById("tab" + id + index).className = "ligado";for (var i=1; i < numTabs; i++) {document.getElementById("tab" + id + (index + i) % numTabs).className = "desligado";}document.getElementById("ev" + id + index).style.display = "block";for (var j=1; j < numTabs; j++) {document.getElementById("ev" + id + (index + j) % numTabs).style.display = "none";}}</script></head><body><a href="#" id="tabevento0" class="ligado" onClick="doClick(0, 6, 'evento')">Principal</a> <a href="#" id="tabevento1" class="desligado" onClick="doClick(1, 6, 'evento')">Características</a> <a href="#" id="tabevento2" class="desligado" onClick="doClick(2, 6, 'evento')">Associações</a><a href="#" id="tabevento3" class="desligado" onClick="doClick(3, 6, 'evento')">Informações</a><a href="#" id="tabevento4" class="desligado" onClick="doClick(4, 6, 'evento')">Preços</a><a href="#" id="tabevento5" class="desligado" onClick="doClick(5, 6, 'evento')">Galeria</a><div id="evevento0" class="conteudo" style="display:block;" align="center">Primeira aba</div><div id="evevento1" class="conteudo" style="display:none;" align="center">Segunda aba</div><div id="evevento2" class="conteudo" style="display:none;" align="center">Terceira aba</div><div id="evevento3" class="conteudo" style="display:none;" align="center">Quarta aba</div><div id="evevento4" class="conteudo" style="display:none;" align="center">Quinta aba</div><div id="evevento5" class="conteudo" style="display:none;" align="center">Sexta aba</div></body></html>
Percebam o getElementById e os índices nas ids dos elementos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Richard Venâncio    1

Richard Venâncio
Postado

Ok cara obrigado pela contribuição...

Cara, eu achei o seu código um tanto confuso, não sei se você usa esses varios parametros para outras coisas, mas não ficaria mais facil assim:
function tabulacao(tab){	var tabsArr = new Array("frmAluno", "frmResponsaveis", "frmContato", "frmRetirar", "frmFichaMedica", "frmProblemas", "frmDoencas", "frmFinanceiro");				//Array com todas as Abas	tab = document.getElementById(tab);//pego a aba que o usuário quer visualizar	if(tab.style.visibility == "visible") return;//se ela ja estiver visivel eu retorno	for(i=0;i<tabsArr.length;i++){ //faço um for pra "esconder todas as abas"		document.getElementById(tabsArr[i]).style.visibility = "hidden";	}	tab.style.visibility = "visible";//E mostro só a aba que o user pediu!}E no Link:<a href="javascript: tabulacao('frmFinanceiro')">Financeiro</a>
Abraço

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