18.03.2025

Mudando para uma Aba Específica do Bootstrap via Link

Resposta Rápida

Para ativar uma aba específica no Twitter Bootstrap usando um hash na URL e jQuery, você pode utilizar o seguinte código JavaScript:

$(document).ready(function() {
  if(window.location.hash){
    // Use o hash da URL para selecionar a aba
    $('a[href="' + window.location.hash + '"]').tab('show');
  } else {
    // Se nenhum hash estiver presente, ative a primeira aba
    $('a[data-toggle="tab"]:first').tab('show');
  }
});

Para ativar a aba desejada, passe seu ID na barra de endereços no formato seupagina.html#tabID.

Atualização Elegante do Hash da URL

Transições suaves entre as abas podem ser alcançadas ao aprimorar o código JavaScript:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  // Atualize o hash da URL para refletir a aba ativa
  window.location.hash = e.target.hash;
  // Impedir a rolagem automática para o conteúdo da aba
  window.scrollTo(0, 0);
});

Para destacar a aba ativa na barra de URL e prevenir a rolagem automática para a aba, trate o evento shown.bs.tab.

Visualização

Trabalhar com código é semelhante a tocar um instrumento musical, como um piano 🎹. Cada elemento (aba) produz um som único (conteúdo) quando ativado:

Seu guia musical: [🎵 Nota C 🟦, 🎵 Nota D 🟩, 🎵 Nota E 🟨]

Se você quiser "tocar" "Nota D" após atualizar a página ou seguir um link:

Sons: 🎶🟩 (Mudando para "Nota D")

Lembre-se:

• As abas têm IDs diferentes, assim como as notas têm sons distintos.
• Nossa URL contém uma melodia apontando para a nota desejada.

Padrão melódico: sinfonia.com#re-nota

Ao visitar esta URL ou atualizar a página com esse hash, teremos exatamente "Nota D" 🎯

🔄🔗 → 🎶🟩

Assim, cada visita se transforma em um concerto único.

Adicionando Sofisticação com HTML5 e localStorage

Crie obras-primas usando a API de Histórico do HTML5, e suas abas lembrarão cada visita ao site:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  if(history.pushState) {
    // Registre a seleção atual no histórico do navegador
    history.pushState(null, null, e.target.hash);
  } else {
    window.location.hash = e.target.hash;
  }
});

Para salvar a última aba ativa, você pode usar localStorage:

$(document).ready(function() {
  var activeTab = localStorage.getItem('activeTab');
  // Restaure o estado da aba salva
  if (activeTab) {
    $('a[href="' + activeTab + '"]').tab('show');
  }
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  // Salve o estado da aba atual
  localStorage.setItem('activeTab', e.target.hash);
});

Agora, as abas manterão seu estado mesmo se o navegador for atualizado ou a aba for fechada.

Problemas Comuns e Soluções

Parar Rolagem

Para evitar a rolagem automática para a aba:

window.location.hash = "tab_" + e.target.hash;

Adicione um prefixo ao hash para manter o foco na aba.

Usando Parâmetros de URL em Renderização do Lado do Servidor

Aplicações que utilizam renderização do lado do servidor podem atualizar dinamicamente as abas:

// Use parâmetros de URL para selecionar a aba ativa
let params = new URLSearchParams(window.location.search);
let activeTab = params.get('activeTab');
if(activeTab) {
  $('a[href="#' + activeTab + '"]').tab('show');
}

Ao utilizar parâmetros de URL, a navegação rápida para a aba desejada se torna significativamente mais fácil.

Lidando com Hash de URL Ausente

Nos casos em que o hash não está presente na URL, você pode usar o seguinte código:

if(!window.location.hash) {
  $('a[data-toggle="tab"]:first').tab('show');
}

Isso ativará a primeira aba por padrão se não houver hash.

Recursos Úteis

1. Navs · Bootstrap — Documentação sobre abas do Bootstrap.
2. .on() | Documentação da API jQuery — Detalhes sobre a função .on() usada para manipulação de eventos no jQuery.
3. API de Histórico - Web APIs | MDN — Visão geral da API de histórico do navegador para manipulação de abas.
4. URLSearchParams - Web APIs | MDN — Como utilizar parâmetros de URL.
5. jquery - Como posso manter a aba Bootstrap selecionada após a atualização da página? - Stack Overflow — Discussão sobre diversas abordagens para preservar o estado das abas Bootstrap.
6. Janela: propriedade localStorage - Web APIs | MDN — Guia sobre como usar o localStorage para salvar informações de sessão.

Video

Navigation