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 29/08/16, 06:36 pm

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?
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

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

Mensagem por Cepheus em 30/08/16, 12:55 pm

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}
avatar

Cepheus
Usuário destaque

Masculino
Inscrito dia : 21/03/2014
Mensagens : 514
Pontos Ativos : 1085

Ver perfil do usuário http://www.bestskins.net/

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

Mensagem por ZombieW em 30/08/16, 01:32 pm

@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?
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

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

Mensagem por Cepheus em 30/08/16, 02:44 pm

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

Cepheus
Usuário destaque

Masculino
Inscrito dia : 21/03/2014
Mensagens : 514
Pontos Ativos : 1085

Ver perfil do usuário http://www.bestskins.net/

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

Mensagem por ZombieW em 30/08/16, 02:51 pm

Obrigado de verdade!
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

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

Mensagem por while em 30/08/16, 03:05 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

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4599

Ver perfil do usuário http://www.ajuda.forumeiros.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