Ir para conteúdo
Fórum Script Brasil
  • 0

abas verticais


alexandre henrique

Pergunta

Boa tarde,

preciso de um script de abas, até fiz um, mas em PHP.

Funcionou bem, mas sabe como é..demora um pouco por conta da requisição ao servidor, daí dá uma demorada pra carregar as imagens na resposta do comando.

Daí o ideal seria em JS.

já vi muitos tipos na web, mas nenhum do jeito que quero,

a diferença é que as abas devem mudar de aparenca quando clicadas

seguinte:

Tenho duas abas. P/ cada aba duas imagens (botao ON/Ativo e Botao Off/Inativo)

Para cada aba um conteúdo.

Ao carregar a página, a Aba1 é a ativa exibindo o seu conteúdo e, claro, a Aba2 a inativa.

Quero que após clicar no Aba2, ela passe a ficar ativa(exibindo conteudo 2), e a Aba1 inativa

E quando clicar novamente na Aba1 ela seja a ativa com seu conteúdo

Ver exemplo que fiz em PHP

http://www.julianapenhaodontologia.com.br/...abas_modelo.php

grato!

Editado por alexandre henrique
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

é simples, olha um exemplo usando o CSS e JS:

<title>Efeitos</title>
</head>
<style>
 /*  # é para definir o id */
#Aba1, #Aba2 {
    width:200px;
    height:200px;
    position:absolute;
}
#Aba1 {
    background:black;    
    margin-left:40px;
    margin-right:40px;
}
#Aba2 {
    background:yellow;
}
#Aba1:active {
    display:block;
}
</style>
<script>
function mostra (elemento,Aba) {
    elemento.style.zIndex = 1;
    document.getElementById(Aba).style.zIndex = 0;    
}
</script>
<body>
<div id="Aba1" onclick="mostra(this,'Aba2')"></div>
<div id="Aba2" onclick="mostra(this,'Aba1')"></div>
</body>

Editado por Arash
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...