Problema com abas

Lucio Macedo de Oliveira · Dezembro 1, 2011

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 --->

<!-- ############## ABERTURA DE FORM DADOS FUNCIONAIS 2ª ABA  ############## -->
   Conteúdo da aba 2

<!-- ############## FECHAMENTO DE FORM DADOS FUNCIONAIS 2ª ABA  ############## -->

</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>

Nana Vasconcelos · Dezembro 2, 2011

Isso e feito com cookie, então você pega o valor do cookie que era a aba que estava aberta e pronto

Função para criar cookies

<script> 

var Cookies = function (key, value, options) { 
   if (arguments.length > 1 && String(value) !== "[object Object]") {
       options = jQuery.extend({}, options);

       if (value === null || value === undefined) {
           options.expires = -1;
       }

       if (typeof options.expires === 'number') {
           var days = options.expires, t = options.expires = new Date();
           t.setDate(t.getDate() + days);
       }

       value = String(value);

       return (document.cookie = [
           encodeURIComponent(key), '=',
           options.raw ? value : encodeURIComponent(value),
           options.expires ? '; expires=' + options.expires.toUTCString() : '',  
           options.path ? '; path=' + options.path : '',
           options.domain ? '; domain=' + options.domain : '',
           options.secure ? '; secure' : ''
       ].join(''));
   } 
   options = value || {};
   var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
   return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};

</script>

Para criar um cookie, NOME , VALOR, {}

<script> Cookies("sAbaAtiva","1", {path:"/"}); </script>

PAra pegar o valor

<script> var sAbaAtiva = Cookies("sAbaAtiva"); </script>

Toda vez que clicar em um aba você seta esse cookie com o valor da aba, 1,2,3 etc. e pega no refresh

Lucio Macedo de Oliveira · Dezembro 2, 2011

Oi Nana, obrigado pela dica, só mais uma dúvida.

JavaScript não é muito meu forte, onde eu coloco para criar os cookies e o valor de cada aba, dentro de cada div ? por exemplo:

var sAbaAtiva = Cookies("sAbaAtiva"); </script>

Conteúdo

var sAbaAtiva = Cookies("sAbaAtiva"); </script>

Conteúdo

...

Nana Vasconcelos · Dezembro 2, 2011

não tem ali onde está todo o seu código, entre

 <head>...</head>

Aqui

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

      //Coloque esse agora aqui

</script>

coloque esse

só que agora eu fiz com que quando a pessoa voltar depois de 1 ano, ou no outro dia, no outro mês ainda vai está a mesma aba ativa, se ele não exluir os cookies é claro

window.onload=function(){
var aba1=document.getElementById('cadastro1');
var aba2=document.getElementById('cadastro2');
//Adicione mais outras aqui

aba1.onclick=function(){Cookies("sAbaAtiva","1", {path:"/", expires: 365});} // Define que a aba ativa é a 1
aba2.onclick=function(){Cookies("sAbaAtiva","2", {path:"/", expires: 365});} // Define que a aba ativa é a 2
//Adicione mais outras qui
}

é só ir adicionando mais abas alí, "var aba3 = document.getElementById('cadastro3');, var aba4 = document.getElementById('cadastro4');, etc.." e depois lá em onclick

PARA PEGAR

não tem essa parte

         
var aAbas       = new Array();  // Lista de abas do documento atual
var sAbaAtiva   = ""            // Define qual é a aba ativa no momento

mude para

    
var aAbas       = new Array();  // Lista de abas do documento atual
var sAbaAtiva   = Cookies('sAbaAtiva');   // Define qual é a aba ativa no momento

Lucio Macedo de Oliveira · Dezembro 2, 2011

Oi

Ainda não funcionou, fiz tudo como nos exemplos acima, a função que cria o cookie, eu coloquei no arquivo cookie.js separado, e fiz a chamada desse arquivo, minha dúvida é com relação, essas duas linhas:

<script> Cookies("sAbaAtiva","1", {path:"/"}); </script> 
<script> var sAbaAtiva = Cookies("sAbaAtiva"); </script>

Obs.: Já testei usar a função criar cookies dentro da página, não funcionou.

Elas percetecem as função Cookie ? ou não ?

fiz assim: ta certo ?

var Cookies = function (key, value, options) { 
   if (arguments.length > 1 && String(value) !== "[object Object]") {
       options = jQuery.extend({}, options);

       if (value === null || value === undefined) {
           options.expires = -1;
       }

       if (typeof options.expires === 'number') {
           var days = options.expires, t = options.expires = new Date();
           t.setDate(t.getDate() + days);
       }

       value = String(value);

       return (document.cookie = [
           encodeURIComponent(key), '=',
           options.raw ? value : encodeURIComponent(value),
           options.expires ? '; expires=' + options.expires.toUTCString() : '',  
           options.path ? '; path=' + options.path : '',
           options.domain ? '; domain=' + options.domain : '',
           options.secure ? '; secure' : ''
       ].join(''));
   } 
   options = value || {};
   var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
   return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;

};

   Cookies("sAbaAtiva","1", {path:"/"});
	var sAbaAtiva = Cookies("sAbaAtiva");

Nana Vasconcelos · Dezembro 2, 2011

essa forma que você fez está errado, porque só é pra definir um cookie depois de clicar na aba, veja com javascript básico.

<div id="cadastro1" class="cont_tab" onclick="Cookies('sAbaAtiva','1', {path:'/', expires: 365});"> 

<!-- 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>


<div id="cadastro2" class="cont_tab" onclick="Cookies('sAbaAtiva','2', {path:'/', expires: 365});"> 

<!-- DIV SEGUNDA ABA --->

<!-- ############## ABERTURA DE FORM DADOS FUNCIONAIS 2ª ABA  ############## -->
Conteúdo da aba 2

<!-- ############## FECHAMENTO DE FORM DADOS FUNCIONAIS 2ª ABA  ############## -->

</div>

// etc...

agora ao inves de você colocar isso

var sAbaAtiva   = ""

colocar no lugar

var sAbaAtiva   = ""+ Cookies('sAbaAtiva') +""

peço que faça um teste a parte para ver se o cookie está sendo criado,

click na aba agora com onclick e lá no head coloque

<script> alert(Cookies('sAbaAtiva')); </script>

se mostrar o numero é porque o cookie está definido e veremos se o problema é outro

Lucio Macedo de Oliveira · Dezembro 6, 2011

Oi, tudo bem ?

Olha, tá criando o cookie, mas a janela de alerta, traz o valor 1 para todas as abas, que é o valor da 1ª aba, então quando atualizo fica voltando para a primeira aba.

Nana Vasconcelos · Dezembro 6, 2011

você está cuidando de trocar o numero em cada onclick correspondente a cada aba

onclick="Cookies('sAbaAtiva','1', {path:'/', expires: 365});"
onclick="Cookies('sAbaAtiva','2', {path:'/', expires: 365});"
onclick="Cookies('sAbaAtiva','3', {path:'/', expires: 365});"
etc...

<div id="cadastro2" class="cont_tab" onclick="Cookies('sAbaAtiva','2', {path:'/', expires: 365});">

se você está fazendo tudo assim certo, então post o código todo de como está agora, preciso ver se você não está definindo sem querer um cookie com o numero 1 fora do onclick

Lucio Macedo de Oliveira · Dezembro 6, 2011

Oi,

Segue o código completo.

<html>
 <head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
	<title>Sistema de Gestão de Pessoas</title>
	<!--
	dependencies
	Includes necessários para a montagem do layout da aplicação
	Resources: 960.gs, Astux generic css framework
	-->
       <link rel="stylesheet" type="text/css" href="abas/css/tabs.css" />
	<script type="text/javascript" src="abas/css/jquery-tabs.js"></script>
	<script type="text/javascript" src="abas/css/tabs.js"></script>

       <link href="images/estilo.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/reset.css" media="all"/> 
	<link rel="stylesheet" type="text/css" href="css/text.css" media="all"/>
	<link rel="stylesheet" type="text/css" href="css/960.css" media="all"/>
	<link rel="stylesheet" type="text/css" href="css/astux-generic.css" media="all"/>
	<link rel="stylesheet" type="text/css" href="css/g2-layout-mono.css" media="all"/>
	<link rel="stylesheet" type="text/css" href="css/g2-layout-color.css" media="all"/>
       <script language="JavaScript" type="text/javascript" src="js/data.js"></script> 
       <!--script language="JavaScript" type="text/javascript" src="js/jquery.min.js"></script>
	<script language="JavaScript" type="text/javascript" src="js/config.js"></script>
	<script language="JavaScript" type="text/javascript" src="js/jquery.corner.js"></script-->
	<!-- end dependencies -->
	<script type="text/javascript" language="JavaScript" src="validacao.js"></script>
       <script language="javascript" type="text/javascript" src="js/cookies.js"></script>
       <script language="JavaScript" type="text/javascript" src="js/data.js" charset="utf-8"></script> 
       <script language="JavaScript" type="text/javascript" src="js/caractere.js" charset="utf-8"></script> 
       <script type="text/JavaScript">

<!-- Script que faz o funcionamento de chamar as telas de pesquisa
function MM_openBrWindow(theURL,winName,features) { //v2.0
 window.open(theURL,winName,features);
}
//---------------------------------------------------------------->
 </script>

 <script>        
       var aAbas       = new Array();  // Lista de abas do documento atual
       var sAbaAtiva   = ""+ Cookies('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;
       }

	window.onload=function(){
       var aba1=document.getElementById('cadastro1');
       var aba2=document.getElementById('cadastro2');
	var aba3=document.getElementById('cadastro3');
	var aba4=document.getElementById('cadastro4');
	var aba5=document.getElementById('cadastro5');

	aba1.onclick=function(){Cookies("sAbaAtiva","1", {path:"/", expires: 365});} // Define que a aba ativa é a 1
       aba2.onclick=function(){Cookies("sAbaAtiva","2", {path:"/", expires: 365});} // Define que a aba ativa é a 2
	aba3.onclick=function(){Cookies("sAbaAtiva","3", {path:"/", expires: 365});} // Define que a aba ativa é a 3
	aba4.onclick=function(){Cookies("sAbaAtiva","4", {path:"/", expires: 365});} // Define que a aba ativa é a 4
	aba5.onclick=function(){Cookies("sAbaAtiva","5", {path:"/", expires: 365});} // Define que a aba ativa é a 5
	}



 </script>



 <script> alert(Cookies('sAbaAtiva')); </script> 

</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 -->

Conteúdo

</div> <!-- FIM DA DIV DADOS -------------------------------------------------------------------------------------------------------------------------->     


<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" onclick="Cookies('sAbaAtiva','1', {path:'/', expires: 365});"> <!-- DIV PRIMEIRA ABA --->

	<!-- ############## ABERTURA DE FORM DADOS DE ENDEREÇO 1ª ABA  ############## -->

       Conteúdo

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

<div id="cadastro2" class="cont_tab" onclick="Cookies('sAbaAtiva','2', {path:'/', expires: 365});"> <!-- DIV SEGUNDA ABA --->

<!-- ############## ABERTURA DE FORM DADOS FUNCIONAIS 2ª ABA  ############## -->

   Conteúdo

   <!-- ############## FECHAMENTO DE FORM DADOS FUNCIONAIS 2ª ABA  ############## -->

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

<div id="cadastro3" class="cont_tab" onclick="Cookies('sAbaAtiva','3', {path:'/', expires: 365});"> <!-- DIV TERCEIRA ABA ---> 

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

      Conteúdo


       <!-- ############## FECHAMENTO DE FORM DADOS FUNCIONAIS 3ª ABA  ############## -->

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

<div id="cadastro4" class="cont_tab" onclick="Cookies('sAbaAtiva','4', {path:'/', expires: 365});"> <!-- DIV QUARTA ABA --->

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

       Conteúdo

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

<div id="cadastro5" class="cont_tab"onclick="Cookies('sAbaAtiva','5', {path:'/', expires: 365});"> <!-- DIV QUINTA ABA --->


   Conteúdo        
<!-- ############## 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>

Nana Vasconcelos · Dezembro 7, 2011

entendi todos os problemas, mais antes de resolver faz exatamente o que vou falar abaixo;

ative o jquery.min.js por que vamos precisar do jquery, pelos visto estava desativado
tire aqueles onclick todos das abas de conteudo

o problema era que o onclick estava no lugar errado o cookie é pra ser criado quando clicasse não na aba com conteúdo e sim no link que chama a aba e agora funcionou

não tem essa parte

<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>

substitui por e agora cada uma tem id

<div class="menu-abas">
<ul class="tabs">
<li><a href="#cadastro1" id="sAbaAtiva1">Endereço</a></li>
<li><a href="#cadastro2" id="sAbaAtiva2">Dados Funcionais</a></li>
<li><a href="#cadastro3" id="sAbaAtiva3">Lotação Funcionários</a></li>
<li><a href="#cadastro4" id="sAbaAtiva4">Ocorrência Funcional</a></li>
<li><a href="#cadastro5" id="sAbaAtiva5">Ofício</a></li>
</ul>
</div>

coloque

<script language="JavaScript" type="text/javascript" src="js/jquery.min.js"></script>

antes de tudo

abaixo dela coloque

<script language="javascript" type="text/javascript" src="js/cookies.js"></script>

agora não tem essa parte que escrevi primeiro

               window.onload=function(){
       var aba1=document.getElementById('cadastro1');
       var aba2=document.getElementById('cadastro2');
               var aba3=document.getElementById('cadastro3');
               var aba4=document.getElementById('cadastro4');
               var aba5=document.getElementById('cadastro5');

               aba1.onclick=function(){Cookies("sAbaAtiva","1", {path:"/", expires: 365});} // Define que a aba ativa é a 1
       aba2.onclick=function(){Cookies("sAbaAtiva","2", {path:"/", expires: 365});} // Define que a aba ativa é a 2
               aba3.onclick=function(){Cookies("sAbaAtiva","3", {path:"/", expires: 365});} // Define que a aba ativa é a 3
               aba4.onclick=function(){Cookies("sAbaAtiva","4", {path:"/", expires: 365});} // Define que a aba ativa é a 4
               aba5.onclick=function(){Cookies("sAbaAtiva","5", {path:"/", expires: 365});} // Define que a aba ativa é a 5
               }

lembrando que você já tirou aqueles onclick="" nas abas que não servia pra nada

você vai substituir essa parte acima por essa nova e pronto

              window.onload=function(){
       var aba1=document.getElementById('sAbaAtiva1');
       var aba2=document.getElementById('sAbaAtiva2');
               var aba3=document.getElementById('sAbaAtiva3');
               var aba4=document.getElementById('sAbaAtiva4');
               var aba5=document.getElementById('sAbaAtiva5');

               aba1.onclick=function(){Cookies("sAbaAtiva","1", {path:"/", expires: 365});} // Define que a aba ativa é a 1
       aba2.onclick=function(){Cookies("sAbaAtiva","2", {path:"/", expires: 365});} // Define que a aba ativa é a 2
               aba3.onclick=function(){Cookies("sAbaAtiva","3", {path:"/", expires: 365});} // Define que a aba ativa é a 3
               aba4.onclick=function(){Cookies("sAbaAtiva","4", {path:"/", expires: 365});} // Define que a aba ativa é a 4
               aba5.onclick=function(){Cookies("sAbaAtiva","5", {path:"/", expires: 365});} // Define que a aba ativa é a 5
               }

lembre que você tem que ter jquery, se você não tiver baixe clicando Aqui

e coloque ali

<script language="JavaScript" type="text/javascript" src="js/jquery.min.js"></script>

Lucio Macedo de Oliveira · Dezembro 7, 2011

Oi, Bom dia !!!

Bom, o cookie passou a ser criado, no alerta cada aba recebe o valor referente a ela, mas continua voltando para a primeira aba ao fazer refresh na pagina. você possui algum e-mail, ai ti passo o a pagina inteira, você roda ela epode ter alguma outra ideia para fixa essa aba.

Desde já grato !!!

Arquivado

Problema com abas

Recommended Posts

Lucio Macedo de Oliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucio Macedo de Oliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucio Macedo de Oliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucio Macedo de Oliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucio Macedo de Oliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nana Vasconcelos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucio Macedo de Oliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

select com varias categorias por horario

comando like (Mysql) no php

Alguém com pratica em subir site em codeigniter4 na Hostinger? Não consigo acessar o bd. Erro de Autenticação. O mesmo site funciona normal em outro servidor web.

Fóruns

Tempo Real

Informação importante