Sistema de Abas (Tópicos)

Detalhes da questão

Endereço do fórum: https://tutorialdoca.forumeiros.com
Versão do fórum: phpBB3

Descrição

Boa tarde,

Eu montei um JS+CSS para fazer um "sistema de abas", onde já passei para a Staff adicionar nos guias.

Portanto, eu comecei usando esse sistema nos tópicos e posteriormente coloquei também nas páginas HTML.

Porém, de um tempo para cá, somente está funcionando nas páginas HTML, gostaria de uma ajuda para entender isso.

Exemplo de Página HTML com o Sistema de Abas funcional: https://tutorialdoca.forumeiros.com/h17-equipamentos-ausentes-no-br

Exemplo de Tópico com o Sistema de Abas não funcional: https://tutorialdoca.forumeiros.com/t2053-familia-acr#2355

O trecho usado em cada tipo é o mesmo:

Código:

<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">ABA 1</li>
<li class="tab-link" data-tab="tab-2">ABA 2</li>
<li class="tab-link" data-tab="tab-3">ABA 3</li>
</ul>

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

Sistema de Abas (CSS)

Código:

/* Sistema de Abas - Início */
.container{
    /*width: 95%;*/
    width: auto!important;
    margin: 0 auto;
    text-align: center;
}
.subcontainer{
    /*width: 95%;*/
    width: auto!important;
    margin: 0 auto;
    text-align: center;
}
ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.tabs li{
    background: #171717;
    color: #C1FA17;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
   font-weight: bold;
    font-style: italic;
}
ul.tabs li.current{
    background: #C1FA17;
    color: #000000;
    font-style: normal;
}
.tab-content{
    display: none;
    background: #171717;
    color: #FFFFFF;
    padding: 15px;
    border-style: solid;
    border-width: 5px;
    border-color: #C1FA17;
}
.tab-content.current{
    display: inherit;
}
ul.tabs br, ul.tabs + br, ul.tabs + br + br, .tab-content + br {display:none!important}
/* Sistema de Abas - Fim */

Sistema de Abas (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');
   })
})

Olá,

Desative um JS um por um até encontrar o problema.

Cordialmente,
Roger123

Não ativei ou desativei nenhum JS recentemente.

Não há outra forma de ver o motivo do não funcionamento? Já que em uma parte do site funciona e outra não, dificilmente deverá ser algum JS.

Os JS podem estar em conflito com esse JS. Recomendo que faça o que lhe pedi para saber de onde vem o problema.

Achei dois:

Onde o primeiro, acredito que parou de funcionar, devido ao tópico de redirecionamento não existir mais.

Remoção do Ícone de Cadeado

Código:

$(function(){
$('a[href^="https://i.servimg.com/u/f82/17/53/75/18/cadead10.gif"]').addClass('dl.icon').attr('href', '/t1380-').css('display', 'none');
});

Porém, o segundo não faz sentido...

Copyright

Código:

jQuery(document).ready(function() {
msg = '<center><strong><p style="color:#c1fa17;font-size:12px"> 2012 - 2019 Tutorial do CA - Todos os direitos reservados</p></strong></center>';
jQuery('#page-footer').html(jQuery('#page-footer').html() + msg);
});

Olá @ZombieW,

O primeiro script não compreendi se o senhor queria que fosse refeito ou irá remover o mesmo, porém o segundo altere para esta atualização:

Código:

(function($) {
 
    $(function() {
 
        var msg = [
            '<center>',
            ' <strong>',
            '  <p style="color:#c1fa17;font-size:12px">',
            '    2012 - 2019 Tutorial do CA - Todos os direitos reservados',
            '  </p>',
            ' </strong>',
            '</center>'
        ].join('\n');
 
        $('#page-footer').html(msg);
    });
})(jQuery);

Atenciosamente,
pedxz.

Olá Pedxz!

O segundo script eu deixei desativado, no momento, não tenho necessidade dele.

Porém, o primeiro era para remover esse ícone de cadeado, pois, vive torto:

Se for somente para remover o ícone adicione na sua folha de estilo o seguinte código:

Código:

img[src="https://i.servimg.com/u/f82/17/53/75/18/cadead10.gif"] { display: none; }

Se não funcionar irei precisar de uma conta teste se possível, porque não sei se é uma imagem ou um background

Não resolveu.

Criei um usuário de teste para você, passo as informações via privado?

ZombieW escreveu:Não resolveu.

Criei um usuário de teste para você, passo as informações via privado?

Sim, por favor

Enviado, aguardando retorno.

Altere o código para:

Código:

dd.dterm[style="background-image: url(https://i.servimg.com/u/f82/17/53/75/18/cadead10.gif);"] {
  background-image: url(https://2img.net/i/fa/empty.gif)!important;


Pedxz escreveu:Altere o código para:

Código:

dd.dterm[style="background-image: url(https://i.servimg.com/u/f82/17/53/75/18/cadead10.gif);"] {
  background-image: url(https://2img.net/i/fa/empty.gif)!important;


Colocado na folha de estilo, mas o erro permanece.

Local que pode ser visto o erro: https://tutorialdoca.forumeiros.com/f30-guias-diversos (no anuncio global)

Altere para:

Código:

dd.dterm[style*="https://i.servimg.com/u/f82/17/53/75/18/cadead10.gif"] {
  background-image: url(https://2img.net/i/fa/empty.gif)!important;
}

Porém se o senhor quer remover definitivamente o ícone basta remover pelo Painel de controle > Visualização > Imagens e Cores > Gestão das imagens > Modo Avançado e vá ao separador Ícones de mensagens

Pedxz escreveu:Altere para:

Código:

dd.dterm[style*="https://i.servimg.com/u/f82/17/53/75/18/cadead10.gif"] {
  background-image: url(https://2img.net/i/fa/empty.gif)!important;
}

Porém se o senhor quer remover definitivamente o ícone basta remover pelo Painel de controle > Visualização > Imagens e Cores > Gestão das imagens > Modo Avançado e vá ao separador Ícones de mensagens

Agora resolveu!

Muito obrigado. Em breve irei abrir mais tópicos...rs

Sobre o acesso que te dei, precisava ser com essas permissões, para você ver aonde o ícone era exibido, pois, estava oculto a área.

Ficarei do aguardo

Questão resolvida Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.