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


Meriteiro

Outubro de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» Conteúdo dos perfis não aparecem
Hoje à(s) 2:10 por Lemon~

» Últimos temas no fórum
Hoje à(s) 2:09 por Kyo Panda

» Botão Thanks na área errada
Hoje à(s) 1:40 por while

» Login na versão mobile
Hoje à(s) 1:11 por Kyo Panda

» Mudando a aparência da lista de fóruns
Hoje à(s) 0:58 por Kyo Panda

» Personalizar SCeditor
Hoje à(s) 0:43 por Kyo Panda

» Postar em ajax com avisos
Hoje à(s) 0:34 por Lineshooter

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Quem está conectado
48 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 48 Visitantes :: 2 Motores de busca

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Função aba nos tópicos

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

Resolvido Função aba nos tópicos

Mensagem por ZombieW em Seg 29 Ago 2016 - 22:36

Detalhes da questão


Endereço do fórum: www.tutorialdoca.com
Versão do fórum: PhpBB3

Descrição


Boa noite,

Estou executando um código tirado desse site:

https://codepen.io/cssjockey/pen/jGzuK

Com os códigos (copie o que estará em cada "spoiler" e cole no quadrado do site) abaixo:

HTML:
Código:
<div class="container">
   <ul class="tabs">
      <li class="tab-link current" data-tab="tab-1">Antes do Reboot</li>
      <li class="tab-link" data-tab="tab-2">Depois do Reboot</li>
      <li class="tab-link" data-tab="tab-3">Animações</li>
      <li class="tab-link" data-tab="tab-4">Reviews</li>
   </ul>

   <div id="tab-1" class="tab-content current">
      Texto Aba 1
   </div>
   <div id="tab-2" class="tab-content">
       Texto Aba 2
   </div>
   <div id="tab-3" class="tab-content">
      Texto Aba 3
   </div>
   <div id="tab-4" class="tab-content">
      Texto Aba 4
   </div>
</div><!-- container -->

CSS:
Código:
body{
    margin-top: 100px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    line-height: 1.6
}
.container{
    width: 800px;
    margin: 0 auto;
}
ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.tabs li{
    background: #171717;
    color: #FFFFFF;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}
ul.tabs li.current{
    background: #171717;
    color: #C1FA17;
    font-weight: bold;
}
.tab-content{
    display: none;
    background: #171717;
    color: #FFFFFF;
    padding: 15px;
}
.tab-content.current{
    display: inherit;
}

JS:
Código:
$(document).ready(function(){
   
   $('ul.tabs li').click(function(){
      var tab_id = $(this).attr('data-tab');

      $('ul.tabs li').removeClass('current');
      $('.tab-content').removeClass('current');

      $(this).addClass('current');
      $("#"+tab_id).addClass('current');
   })

})

Afim de obter o mesmo resultado que o site me proporciona, mas meu tópico não está "seguindo" corretamente:

http://www.tutorialdoca.com/t1380-topico-de-testes#1650

Como vocês podem ver, no site onde o código é oferecido as abas ficam na horizontal, mas no meu tópico, ficam na vertical.

Como posso arrumar isso?

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4050

http://www.perfectteam.org

Resolvido Re: Função aba nos tópicos

Mensagem por Cepheus em Ter 30 Ago 2016 - 16:55

Isso acontece porque o editor está interpretando os espaços como quebra de linha < br >
Adicione na sua folha de estilo CSS:
Código:
ul.tabs br, ul.tabs + br, ul.tabs + br + br, .tab-content + br {display:none!important}

Cepheus
Usuário avançado

Masculino
Inscrito dia : 21/03/2014
Mensagens : 474
Pontos Ativos : 1971

http://www.bestskins.net/

Resolvido Re: Função aba nos tópicos

Mensagem por ZombieW em Ter 30 Ago 2016 - 17:32

@Cepheus

Eu te dava um beijo agora se pudesse! auehauehaueh Eu amo você

Me tira só mais uma dúvida:

Eu precisava deixar as abas centralizadas, como faço?

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4050

http://www.perfectteam.org

Resolvido Re: Função aba nos tópicos

Mensagem por Cepheus em Ter 30 Ago 2016 - 18:44

Só adicionar no seu css:
Código:
.container {
    width: auto!important;
    text-align: center;
}

Cepheus
Usuário avançado

Masculino
Inscrito dia : 21/03/2014
Mensagens : 474
Pontos Ativos : 1971

http://www.bestskins.net/

Resolvido Re: Função aba nos tópicos

Mensagem por ZombieW em Ter 30 Ago 2016 - 18:51

Obrigado de verdade!

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1232
Pontos Ativos : 4050

http://www.perfectteam.org

Resolvido Re: Função aba nos tópicos

Mensagem por while em Ter 30 Ago 2016 - 19:05

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

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

while
Usuário experiente

Masculino
Inscrito dia : 24/04/2016
Mensagens : 2819
Pontos Ativos : 4146

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5