Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu com abas

08-05-2007 12:35

Abaixo segue o código de um menu com abas.

Parte em CSS:
<style type="text/css"> /* estilo para aba ativa */ .abaativa { font-family:tahoma; font-size:8pt; font-weight:bold; color:#666666; background-color:#f0f0f0; } /* estilo para aba inativa */ .abainativa { font-family:tahoma; font-size:8pt; font-weight:bold; color:#cccccc; background-color:#f9f9f9; } </style>

Parte em JavaScript:
<script language="JavaScript"> var aAbas = new Array(); var sAbaAtiva = "" 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" ); 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" ); var sBlocoAba = aAba[ ABA_BLOCO ]; var oBlocoAba = document.getElementById( sBlocoAba ); oBlocoAba.style.display = "none"; } function mudaClasse( oObjeto, sClasse ){ oObjeto.className = sClasse; } </script>

Parte em HTML:
<table width="600"> <tr> <td width="150" align="center" class="abaativa" id="td_aba1" onClick="trataCliqueAba(this.id);" onMouseOver="trataMouseAba(this);">Aba 1</td> <td width="150" align="center" class="abainativa" id="td_aba2" onClick="trataCliqueAba(this.id);" onMouseOver="trataMouseAba(this);">Aba 2</td> <td width="150" align="center" class="abainativa" id="td_aba3" onClick="trataCliqueAba(this.id);" onMouseOver="trataMouseAba(this);">Aba 3</td> <td width="150" align="center" class="abainativa" id="td_aba4" onClick="trataCliqueAba(this.id);" onMouseOver="trataMouseAba(this);">Aba 4</td> </tr> </table> <br clear="all"> <script language="JavaScript"> defineAba("td_aba1", "div_aba1"); </script> <div id="div_aba1" style="display:block;"> conteúdo para aba 1 </div> <script language="JavaScript"> defineAba("td_aba2", "div_aba2"); </script> <div id="div_aba2" style="display:none;"> conteúdo para aba 2 </div> <script language="JavaScript"> defineAba("td_aba3", "div_aba3"); </script> <div id="div_aba3" style="display:none;"> conteúdo para aba 3 </div> <script language="JavaScript"> defineAba("td_aba4", "div_aba4"); </script> <div id="div_aba4" style="display:none;"> conteúdo para aba 4 </div>

Obs.: Junte todas as partes em um documento .html para o funcionamento.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado