Publicado em 1 de dez.

Problema com abas

Olá, pessoal

Estou com o seguinte problema, fiz 5 abas, usando divs, carrego os conteudos dentro das divs, todo o codigo da pagina fica na divs, o problema é que

ao atualizar a pagina, volta para a primeira aba, mesmo eu fazendo uma consulta ou cadastro, quando atualiza a pagina volta para a primeira aba, como faço para controlar

as abas, quando atualizar ele ficar na aba selecionada. Favor se alguém puder ajudar, fico mui agradecido !!!

Segue como está meu codigo:

<html>
<head>
<script>
 var aAbas = new Array(); // Lista de abas do documento atual
 var sAbaAtiva = "" // Define qual é a aba ativa no momento
 var ABA_ID = 1
 var ABA_BLOCO = 2
 var ABA_CAMPOS = 3

 function defineAba( sId, sBloco ){
 var aAba = new Array( ABA_CAMPOS );
 aAba[ ABA_ID ] = sId;
 aAba[ ABA_BLOCO ] = sBloco;
 aAbas.push( aAba );
 }

 function defineAbaAtiva( sId ){
 trataCliqueAba( sId );

	}

 function trataMouseAba( oAba ){
 oAba.style.cursor = "pointer";
 }

 function trataCliqueAba( sId ){
 for ( var iAba = 0; iAba < aAbas.length; iAba++ ){
 var aAba = aAbas[ iAba ];

 if ( aAba[ ABA_ID ] == sId ) ativaAba( aAba );

 else inativaAba( aAba );
 }
 }

 function ativaAba( aAba ){
 var sAba = aAba[ ABA_ID ];
 var oAba = document.getElementById( sAba );
 mudaClasse( oAba, "abaativa" ); // Esse comando chama a classe css para fazer a troca

 var sBlocoAba = aAba[ ABA_BLOCO ];
 var oBlocoAba = document.getElementById( sBlocoAba );
 oBlocoAba.style.display = "block";

 }

 function inativaAba( aAba ){
 var sAba = aAba[ ABA_ID ];
 var oAba = document.getElementById( sAba );
 mudaClasse( oAba, "abainativa" ); // Esse comando chama a classe css para fazer a troca

 var sBlocoAba = aAba[ ABA_BLOCO ];
 var oBlocoAba = document.getElementById( sBlocoAba );
 oBlocoAba.style.display = "none";
 }

 function mudaClasse( oObjeto, sClasse ){
 oObjeto.className = sClasse;
 }

</script>
<title></title>

</head>
<body>
<div class="header-container full-me">
 <div class="container_16 pad-me-10-top">
 <div class="grid_4">
 <img alt="Descrição da logomarca da empresa" src="images/logo.png"/>
 </div><!-- end .grid_4 -->

 <div class="grid_12 align-me-right">
 <div class="titulo1">Sistema de Gestão de Pessoas</div>
 <?php
 ?>
 <div class="titulo2">Bem Vindo(a), <?php echo $login_nome ?></div>
 <div><div class="menu logout"><a href="/sistemas/terceirizados">Sair do Sistema</a></div></div>
 </div>

 </div><!-- end .container-16 -->

	</div><!-- end .header-container -->
	<div class="menu-container full-me">
	<div class="container_16 menu" >
 <?php include ('menu.php'); ?>
 </div>
	</div><!-- end .menu-container -->

 <div class="container-body container_16">

 <!-- ############## INICIO DE TODO DOCUMENTO ############## -->
 <div class="body-container">

<div class="dados"> <!-- COMEÇO DA DIV DADOS -->

 Conteudo fixo fora das abas

</div> <!-- FIM DA DIV DADOS -------------------------------------------------------------------------------------------------------------------------->
</body>
<body>
<div class="menu-abas">
<ul class="tabs">
<li><a href="#cadastro1">Endereço</a></li>
<li><a href="#cadastro2">Dados Funcionais</a></li>
<li><a href="#cadastro3">Lotação Funcionários</a></li>
<li><a href="#cadastro4">Ocorrência Funcional</a></li>
<li><a href="#cadastro5">Ofício</a></li>
</ul>
</div>

<div class="tab_container"> <!-- CONTEUDO GERAL DE TODAS AS ABAS --->

 <div id="cadastro1" class="cont_tab" > <!-- DIV PRIMEIRA ABA --->

	<!-- ############## ABERTURA DE FORM DADOS DE ENDEREÇO 1ª ABA ############## -->
 Conteúdo da aba 1
 <!-- ############## FECHAMENTO DE FORM DADOS DE ENDEREÇO 1ª ABA ############## -->

</div> <!-- FIM DA PRIMEIRA ABA ---------------------------------------------------------------------------------------------------------------------->

 <div id="cadastro2" class="cont_tab"> <!-- DIV SEGUNDA ABA --->

Conteúdo da aba 2

</div> <!-- FIM DA SEGUNDA ABA ----------------------------------------------------------->

 <div id="cadastro3" class="cont_tab"> <!-- DIV TERCEIRA ABA --->

 <!-- ############## ABERTURA DE FORM DADOS LOTAÇÃO 3ª ABA ############## -->

 Conteúdo da aba 3

 <!-- ############## FECHAMENTO DE FORM DADOS LOTAÇÃO 3ª ABA ############## -->
</div> <!-- FIM DA TERCEIRA ABA ------------------------------------------------------------------------------------------------------------------->

 <div id="cadastro4" class="cont_tab"> <!-- DIV QUARTA ABA --->

	<!-- ############## ABERTURA DE FORM DADOS OCORRENCIA 4ª ABA ############## -->

 Conteúdo da aba 4

 <!-- ############## FECHAMENTO DE FORM DADOS OCORRENCIA 4ª ABA ############## -->
</div> <!-- FIM DA QUARTA ABA -------------------------------------------------------------------------------------------------------------------->

 <div id="cadastro5" class="cont_tab"> <!-- DIV QUINTA ABA --->

	<!-- ############## ABERTURA DE FORM DADOS OFICIO 5ª ABA ############## -->

 Conteúdo da aba 5

 <!-- ############## FECHAMENTO DE FORM DADOS OFICIO 5ª ABA ############## -->
</div> <!-- FIM DA QUINTA ABA -------------------------------------------------------------------------------------------------------------------->

</div> <!-- FECHAMENTO DE TODAS AS ABAS #### DIV tab_container #####------------------------------------------------------------------------------>

	</div> <!-- FECHAMENTO DA DIV body-container -------------------------------------------------------------------------------------------------->

	<!-- ############## FIM DE TODO DOCUMENTO ############## -->
	</div><!-- FINAL DA DIV CONTAINER-BODY -->

 <!-- ############## RODAPÉ ############## -->
 <div class="footer-container full-me">
 <div class="titulo6">
 Secretaria Municipal de Educação de Fortaleza<br>
 Sistema de Gestão de Pessoas<br>
 Departamento de Tecnologia da Informação
 </div>

	</div><!-- end .footer-container -->
</body>
</html>

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...