JetTabs não alterna conteúdo: como corrigir no frontend

Tipo Page Builders

Nome do erro JetTabs não alterna conteúdo no frontend EN: JetTabs not switching content on the frontend

Severidade Atenção

Descrição O JetTabs não alterna conteúdo no frontend quando o JavaScript do widget não carrega, IDs de aba duplicados colidem ou a otimização de cache adia o script, deixando as abas presas no primeiro item ao clicar.

O que é JetTabs que não alterna conteúdo?

O JetTabs é o widget de abas do Crocoblock para o Elementor. No frontend, ele depende de um script JavaScript próprio que escuta o clique no rótulo da aba, alterna a classe ativa entre os painéis e exibe o conteúdo correspondente. Quando o widget usa carregamento por AJAX, esse mesmo script ainda busca o template de cada aba sob demanda. Se o JavaScript não roda como esperado, as abas aparecem na tela, mas o clique não troca o painel: o visitante fica preso sempre no primeiro conteúdo.

O problema é quase sempre de execução do JavaScript no navegador, não de conteúdo. Plugins de cache e minificação que adiam ou combinam scripts, dois widgets JetTabs com o mesmo ID na página, um conflito de jQuery com outro plugin ou tema, ou o template chamado por AJAX que falha em retornar HTML são as causas concretas. O conteúdo está lá no editor do Elementor, mas o gatilho que faz a aba responder ao clique deixou de funcionar no site publicado.

Como identificar

Ao clicar em qualquer aba do JetTabs no site publicado, o conteúdo não muda e permanece sempre no primeiro painel.
As abas funcionam normalmente na prévia do editor do Elementor, mas travam no frontend para o visitante.
No console do navegador aparece um erro de JavaScript como ‘Uncaught TypeError’ ou ‘$ is not a function’ ao clicar na aba.
Quando o JetTabs usa carregamento por AJAX, a aba mostra o spinner de carregamento e nunca exibe o conteúdo do template.
Em páginas com mais de um bloco de abas, clicar em uma aba abre o conteúdo do outro JetTabs por causa de IDs repetidos.

Antes de começar: Antes de desativar plugins de cache ou trocar de tema em produção, faça um backup completo do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para reverter rapidamente caso algo quebre no frontend.

Como prevenir

Sempre exclua os scripts do JetTabs e do Elementor das regras de delay, combine e minify do seu plugin de cache, validando o frontend após cada ajuste de otimização.
Use IDs CSS únicos por widget quando colocar mais de um JetTabs na mesma página, evitando colisão entre os painéis.
Regenere os arquivos do Elementor após cada atualização do Elementor, do tema ou do JetTabs, para manter o CSS/JS em sincronia.
Mantenha os templates referenciados pelo carregamento AJAX publicados e versionados, e revise antes de excluir qualquer template que possa estar em uso por uma aba.

Causa

Um plugin de cache ou otimização (como WP Rocket ou Perfmatters) está adiando, combinando ou minificando o JavaScript do JetTabs, fazendo o script do widget não inicializar a tempo de registrar o clique nas abas.
Dois ou mais widgets JetTabs na mesma página estão com IDs de aba idênticos, então o clique em um bloco aciona o painel do outro bloco em vez do conteúdo correto.
O JavaScript do Elementor frontend não foi carregado porque o arquivo CSS/JS do Elementor está desatualizado no cache; sem ele, o script do JetTabs não tem a base do Elementor para rodar.
Outro plugin ou o tema enfileira uma versão conflitante do jQuery ou dispara um erro de JavaScript que interrompe a execução antes do handler de clique do JetTabs ser registrado.
O JetTabs está configurado para carregar o conteúdo por AJAX, mas o template do Elementor referenciado foi excluído, despublicado ou retorna vazio, então a aba dispara a requisição e não recebe HTML para exibir.

Como resolver

Regenere os arquivos e limpe o cache do site: Comece pelo mais comum: regenere o CSS/JS do Elementor e limpe todos os caches (plugin de cache, CDN e navegador). Arquivos defasados deixam o script do JetTabs sem a base do Elementor e travam a troca de abas.
```
Painel WP -> Elementor -> Ferramentas -> Regenerar Arquivos e Dados
Limpe o cache do seu plugin de cache (ex.: WP Rocket -> Limpar cache)
Purgue o cache da CDN/Cloudflare e recarregue a página com Ctrl+F5
```
Desative o adiamento e a combinação de JavaScript: No plugin de otimização, exclua os scripts do JetTabs e do Elementor das opções de Delay JavaScript, Combine e Minify. Adiar esses arquivos impede que o handler de clique das abas seja registrado a tempo.
```
WP Rocket -> Otimização de Arquivos -> desligue 'Combinar arquivos JS'
WP Rocket -> Mídia -> Adiar execução de JS -> adicione 'jet-tabs' e 'elementor' a lista de exclusão
Perfmatters -> Otimização de Scripts -> exclua jet-tabs e elementor do delay
```
Garanta IDs únicos quando houver vários JetTabs: Se a página tem mais de um bloco de abas, abra cada widget JetTabs no Elementor e force um ID CSS distinto na aba Avançado. IDs repetidos fazem o clique acionar o painel do bloco errado.
```
Editor do Elementor -> selecione o widget JetTabs -> aba Avançado
Em ID CSS, defina um valor único por bloco (ex.: jettabs-faq, jettabs-precos)
Atualize a página e teste o clique em cada bloco separadamente
```
Isole o conflito de JavaScript de plugin ou tema: Abra o console do navegador, recarregue a página e procure erros de JavaScript ao clicar na aba. Desative os demais plugins um a um e troque para um tema padrão para identificar o que interrompe a execução antes do JetTabs.
```
Abra o console: F12 -> aba Console -> recarregue a página
Clique na aba e observe erros como 'Uncaught TypeError' ou '$ is not a function'
Painel WP -> Plugins -> desative os demais um a um, testando o clique a cada vez
```
Verifique o template chamado por AJAX: Se o JetTabs carrega conteúdo por AJAX, confirme que cada aba aponta para um template do Elementor publicado e existente. Um template excluído ou despublicado faz a aba ficar no spinner e nunca renderizar.
```
Editor do Elementor -> widget JetTabs -> abra cada aba e confira o template selecionado
Painel WP -> Templates -> confirme que o template existe e esta Publicado
Reselecione o template na aba e atualize a página para refazer a requisicao AJAX
```

PHP

<?php
// Exclui os scripts do JetTabs e do Elementor do 'delay JavaScript' do WP Rocket,
// garantindo que o handler de clique das abas inicialize no frontend.
add_filter( 'rocket_delay_js_exclusions', 'full_jettabs_delay_js_exclusions' );
function full_jettabs_delay_js_exclusions( $excluded ) {
    $excluded[] = 'jet-tabs';
    $excluded[] = 'jet-elements';
    $excluded[] = 'elementor/assets/js/frontend';
    $excluded[] = 'elementor/assets/js/webpack';
    return $excluded;
}

Perguntas frequentes

Por que o JetTabs funciona no editor mas não no frontend

No editor o Elementor carrega seus próprios scripts sempre, então as abas trocam normalmente. No site publicado, um plugin de cache costuma adiar ou combinar o JavaScript do JetTabs, e sem esse script o clique não alterna o painel. Exclua jet-tabs e elementor do delay e limpe o cache.

Como faço o JetTabs voltar a alternar o conteúdo ao clicar

Comece regenerando os arquivos do Elementor em Ferramentas e limpando todos os caches, inclusive CDN e navegador. Depois exclua os scripts do JetTabs e do Elementor das otimizações de JavaScript do seu plugin de cache e recarregue a página com Ctrl+F5.

O WP Rocket pode quebrar a troca de abas do JetTabs

Sim. As opções de combinar, minificar e adiar JavaScript do WP Rocket podem impedir o script do JetTabs de inicializar a tempo de registrar o clique. Adicione jet-tabs e elementor à lista de exclusão do delay e desligue a combinação de JS para esses arquivos.

Tenho dois JetTabs na mesma página e um abre o conteúdo do outro

Isso acontece quando os blocos compartilham IDs de aba iguais. Abra cada widget no Elementor, vá à aba Avançado e defina um ID CSS único por bloco. Com IDs distintos, o clique passa a acionar o painel correto de cada JetTabs.

A aba do JetTabs fica carregando e não mostra o conteúdo

Quando o JetTabs usa carregamento por AJAX e o spinner não some, o template referenciado provavelmente foi excluído ou despublicado. Confirme em Templates que o template existe e está publicado, e reselecione-o na aba para refazer a requisição.

Como saber se o problema é do JetTabs ou de outro plugin

Abra o console do navegador com F12, recarregue a página e clique na aba observando erros de JavaScript. Depois desative os demais plugins um a um e troque para um tema padrão; se as abas voltarem, reative os itens até achar o que interrompe a execução.

Preciso editar código para corrigir o JetTabs

Na maioria dos casos não: regenerar arquivos, limpar cache, ajustar exclusões de JavaScript e usar IDs únicos resolvem pelo painel. Um snippet só é útil para excluir os scripts do Elementor e do JetTabs do adiamento de forma programática quando a interface do plugin de cache não basta.

Atualizar o Elementor ou o JetTabs pode quebrar as abas

Pode, se o CSS/JS gerado ficar defasado em cache após a atualização. Sempre que atualizar o Elementor, o tema ou o JetTabs, vá em Elementor, Ferramentas e use Regenerar Arquivos, depois limpe o cache para que o script atualizado das abas seja servido.

Atenção

Como corrigir pop-ups que não aparecem no Elementor

Quando o popup do Elementor não aparece, a janela criada no Popup Builder nunca abre no site publicado. As causas comuns são falta de Condicao de exibicao em Publicar, Gatilho ausente sem link de disparo, o cookie de frequencia já gravado, ou o cache minificando o script do popup.

Grave

Como corrigir o conflito de templates de curso entre Tutor LMS e Elementor

A página de curso fica sem o layout do Elementor (ou mostra o template padrão do Tutor LMS) porque o addon Tutor LMS do Elementor não esta ativo ou a prioridade de template aponta para o template embutido do plugin em vez do seu template Elementor.

Informativo

Como corrigir o layout responsivo do widget Card no Happy Addons

O layout responsivo do widget Card do Happy Addons quebra quando a largura da coluna, o tamanho da imagem ou o alinhamento do texto não são ajustados por dispositivo no Elementor, fazendo o card desalinhar, estourar a imagem ou perder a altura igual no celular e no tablet.

Atenção

Como corrigir erros de compilacao de CSS com vários page builders no WordPress

O erro de CSS com vários page builders no WordPress ocorre quando Elementor e outro construtor (como o Astra Pro) geram folhas de estilo separadas que se sobrepoem ou ficam em cache desatualizado, fazendo o layout da página renderizar sem os estilos corretos.

Atenção

Como corrigir estilos que não aplicam entre Ultimate Addons e Astra Pro no WordPress

O problema dos estilos do Ultimate Addons e Astra Pro que não aplicam acontece quando o CSS dos widgets UAEL fica preso em arquivos gerados desatualizados, em cache do site ou é sobrescrito pelo CSS dinâmico do Astra Pro, deixando o widget sem visual no frontend.

Informativo

Como corrigir o erro do Business Hours no Ultimate Addons no WordPress

O erro do Business Hours no Ultimate Addons aparece quando o widget de horario de funcionamento não carrega no editor, destaca o dia errado como aberto ou exibe horarios diferentes dos configurados, quase sempre por fuso horario do WordPress incorreto, cache antigo ou conflito de JavaScript.

Setores

Extensões

Integrações

Como corrigir o JetTabs que não alterna conteúdo no frontend

O que é JetTabs que não alterna conteúdo?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir pop-ups que não aparecem no Elementor

Como corrigir o conflito de templates de curso entre Tutor LMS e Elementor

Como corrigir o layout responsivo do widget Card no Happy Addons

Como corrigir erros de compilacao de CSS com vários page builders no WordPress

Como corrigir estilos que não aplicam entre Ultimate Addons e Astra Pro no WordPress

Como corrigir o erro do Business Hours no Ultimate Addons no WordPress

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos