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

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.

Erros relacionados

- [Como corrigir Elementor com widgets que não aparecem](https://full.services/wp-fixer/corrigir-elementor-widgets-nao-aparecem/)
- [Como corrigir Elementor com tela cinza ou carregando infinito](https://full.services/wp-fixer/corrigir-elementor-tela-cinza/)
- [Como corrigir CSS do Elementor que não aplica no frontend](https://full.services/wp-fixer/corrigir-elementor-css-nao-aplica/)

## 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

1. 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
```

2. 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
```

3. 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
```

4. 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
```

5. 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
```


## Código

```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.

**Fonte:** [Crocoblock — JetTabs Knowledge Base](https://crocoblock.com/knowledge-base/)