post

Verificando URL atual em lista com JavaScript

Publicado em: 11/07/2023

Categorias: BlogJavaScriptJS

Caso tenha uma lista de paginas, e precise adicionar um estilo personalizado no item que corresponde a página atual, você pode usar este código abaixo para adicionar uma class personalizada no item que tem a mesma URL da pagina que esta.

// Obtém a URL da página atual
var paginaAtual = window.location.href;

// Obtém todos os itens da lista
var itensLista = document.querySelectorAll('ul li');

// Itera sobre cada item da lista
for (var i = 0; i < itensLista.length; i++) {
  var linkItem = itensLista[i].querySelector('a');

  // Verifica se o link do item é igual à página atual
  if (linkItem.href === paginaAtual) {
    // Adiciona a classe "pagina-atual" ao item
    itensLista[i].classList.add('pagina-atual');
  }
}
<ul>
  <li><a href="pagina1.html">Item 1</a></li>
  <li><a href="pagina2.html">Item 2</a></li>
  <li><a href="pagina3.html">Item 3</a></li>
</ul>

Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/2977

ID de Referência: 2977

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários