Código JS para Destacar Item em Lista HTML pelo ID da Página - Bruno Devx - BR Criativus

post #7842

Código JS para Destacar Item em Lista HTML pelo ID da Página

Publicado em: 06/03/2026 / Atualizado em: 06/03/2026

Categorias: BlogCSSHTMLJavaScript (JS)JS

Este código abaixo destaca automaticamente o item correspondente à página atual. Ele identifica o ID da página presente no contêiner e aplica um estilo especial no item da grade com o mesmo ID, indicando ao usuário em qual página ele está e facilitando a navegação para as demais opções.

<script>
document.addEventListener("DOMContentLoaded", function() {

  const container = document.querySelector('[class*="tabs-produto-id-"]');
  if(!container) return;

  const match = container.className.match(/tabs-produto-id-(\d+)/);
  if(match){
    const pageId = match[1];
    const activeTab = document.querySelector('.tab-id-' + pageId);

    if(activeTab){
      activeTab.classList.add('active-tab');
    }
  }

});
</script>

<style>
.active-tab {
    /* AQUI VAI SEU CSS PERSONALIZADO */
}
</style>

O exemplo abaixo mostra como seu HTML deve estar preparado:

<div class="tabs-produto tabs-produto-id-1666">

  <a href="/produto-1665" class="tab-item tab-id-1665">
    Produto 1665
  </a>

  <!-- O PRODUTO A SER DESTACADO SERIA ESTE: -->
  <a href="/produto-1666" class="tab-item tab-id-1666">
    Produto 1666
  </a>

  <a href="/produto-1667" class="tab-item tab-id-1667">
    Produto 1667
  </a>

  <a href="/produto-1668" class="tab-item tab-id-1668">
    Produto 1668
  </a>

</div>

Depois de rodar o JS seu HTML vai ficar assim:

<a href="/produto-1666" class="tab-item tab-id-1666 active-tab">
  Produto 1666
</a>

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=7842

ID de Referência: 7842

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato