post
Verificando URL atual em lista com JavaScript
Publicado em: 11/07/2023
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.