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.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Botões padrões tema pokemon
Hoje à(s) 12:54 am por APOllO

» Fim do rodapé
Ontem à(s) 11:34 pm por PrisoN†BreaK

» Overall_Header
Ontem à(s) 10:26 pm por iScroll

» Bug na mensagem em citação?
Ontem à(s) 09:40 pm por Harleen

» Adicionar membros nos grupos
Ontem à(s) 07:04 pm por Harleen

» Caixa de Login
Ontem à(s) 03:42 pm por iScroll

» Personalizar cabeçalho
Ontem à(s) 03:41 pm por iScroll

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
244 usuários online :: 6 usuários cadastrados, Nenhum Invisível e 238 Visitantes :: 2 Motores de busca

APOllO, dxmar74, iScroll, Kyko, mrvisible, Solkis

[ 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

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

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

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

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

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

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

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
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

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