Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Kit avatar e assinatura.
Hoje à(s) 01:37 am por ranzatti

» Efeito nos grupos
Hoje à(s) 12:17 am por Matt Shultz

» PAGINA HTML
Hoje à(s) 12:08 am por T1ag0

» Concurso do Dia das Bruxas: Vossas participações
Ontem à(s) 11:05 pm por iScroll

» Logo fixo
Ontem à(s) 10:50 pm por iScroll

» Logo para um fórum
Ontem à(s) 10:36 pm por Hyouran

» Rank para o meu fórum
Ontem à(s) 10:33 pm por Matt Shultz

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Matt Shultz
 
iScroll
 
Harleen
 
Ketholy123
 
T1ag0
 
PlayWillian
 
zHugh
 
soldado
 
Lecxa
 

Quem está conectado
197 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 195 Visitantes :: 2 Motores de busca

Pedxz, soldado

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Problemas com Exibição de Abas

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Problemas com Exibição de Abas

Mensagem por ShaDownS em 31/10/15, 11:08 pm

Detalhes da questão


Endereço do fórum: http://fairytailcelestial.forumeiros.com
Versão do fórum: PhpBB3

Descrição


Olá, gostaria de saber o que está de errado com o código que editei. Eis o código atual:
Código:
<style>
div.aba {
  background: #fff;
  text-align: justify;
  margin-bottom: 20px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#navebar {
  font: bold 14px Trebuchet MS;
  margin: 0;
  padding:3px 0;
}

#navebar li {
  list-style: none;
  margin-right: 6px;
  display: inline;
}

#navebar li a {
  padding: 3px 6px;
  border: 1px solid #09F;
  border-bottom: none;
  background: #dde;
  color: #333;
  text-decoration: none;
}

#navebar li a:hover {
  color: #000;
  background: #aae;
  border-color: #09F;
}

#navebar li a.ativo {
  background-color: #009;
}

#navebar li a {
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
    width: 120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: gray;
}
    #navebar li a:hover {
    background-color: #22D5E7;
}</style>

<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">
<li><a class="ativo">Guia dos Novatos</a></li>
<li><a>Regras e Magias</a></li>
<li><a>Regras e Magias</a></li>
<li><a>Regras e Magias</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script>
<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>
</div>

As únicas coisas que modo fiquei foram o número de abas na parte do script, nota-se pelos textos ja postos; tinha retirado algumas propriedades de CSS (background-transition e transition) e algumas outras propriedades em CSS.

Alguém pode me dizer o que está errado? Pois o efeito não foi o que desejei. Vejam meu fórum pra visualizar o resultado do código acima. Eu apliquei à mensagem da página Inicial.

Abraços o/
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Problemas com Exibição de Abas

Mensagem por RJUchiha em 02/11/15, 12:14 am

Boas seria esse efeito que vc desejava? prntscr.com/8y0mak
Se for deixo o codigo corrijido em baixo:
Spoiler:

Código:
<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar"> <li><a class="ativo">Guia dos Novatos</a></li> <li><a>Regras e Magias</a></li><li><a>Regras e Magias</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script>
<div id="seender_abas">
        
 <div id="aba1" class="aba">
     Conteúdo da aba 1.      
 </div>
        
 <div id="aba2" class="aba">
     Conteúdo da aba 2.              
 </div>
<div id="aba3" class="aba">
     Conteúdo da aba 3.              
 </div>
          
</div>
avatar

RJUchiha
Nível 3

Masculino
Inscrito dia : 25/10/2015
Mensagens : 24
Pontos Ativos : 45

Ver perfil do usuário http://narutogamedicasbr.forumeiro.com/

Resolvido Re: Problemas com Exibição de Abas

Mensagem por ShaDownS em 02/11/15, 02:10 am

As abas nao ficaram uma do lado da outra.
E o efeito do JS não é instantâneo, tem um delay de quase um segundo pra dar efeito.


Fico no espero o/
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Problemas com Exibição de Abas

Mensagem por RJUchiha em 02/11/15, 05:22 am

O codigo CSS que passou tem um erro por favor substitua por este:
Código:
<style>div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}</style>
Resultou?
avatar

RJUchiha
Nível 3

Masculino
Inscrito dia : 25/10/2015
Mensagens : 24
Pontos Ativos : 45

Ver perfil do usuário http://narutogamedicasbr.forumeiro.com/

Resolvido Re: Problemas com Exibição de Abas

Mensagem por ShaDownS em 02/11/15, 11:42 am

Funcionou!

Mas eu queria saber qual código CSS personaliza as abas e o quadro onde fica os "conteúdos". Pode me indicar os códigos, separados, que personaliza cada um desses dois fatores? Feliz
Só mais isso para eu dar resolvido. ^^
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Problemas com Exibição de Abas

Mensagem por RJUchiha em 02/11/15, 11:57 am

Nao percebi bem a questao mas penso que seja isto:~
Codigo CSS

Código:
div.aba {
  background:Aqui Muda a Cor do Fundo do "Conteudo da Aba";
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#Cor da Aba;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#Cor da Fonte Quando o Rato está sobre;
  background:#Cor Quando o Rato está Sobre;
  border-color:#Cor da Quando o Rato está sobre;
  }
#navebar li a.ativo {background-color:#Cor da Aba Ativa;}
#navebar li a {
      color: #Cor da Fonte da Aba;
    font-size: 14px; <- Diminuir ou Aumentar o tamanho da Fonte
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #Cor da Aba Inativa;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #Cor Quando o Rato está Sobre;}

So alterar as partes onde deixei a explicaçao para que é que servia
avatar

RJUchiha
Nível 3

Masculino
Inscrito dia : 25/10/2015
Mensagens : 24
Pontos Ativos : 45

Ver perfil do usuário http://narutogamedicasbr.forumeiro.com/

Resolvido Re: Problemas com Exibição de Abas

Mensagem por ShaDownS em 02/11/15, 07:44 pm

Ah, obrigado. Ajudou um pouco.

Podem fechar ^^
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 08/03/2014
Mensagens : 907
Pontos Ativos : 1484

Ver perfil do usuário http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Problemas com Exibição de Abas

Mensagem por Fraise em 02/11/15, 07:45 pm

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5023
Pontos Ativos : 6703

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum