post #2977
Verificando URL atual em lista com JavaScript
Publicado em: 11/07/2023 / Atualizado 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>
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=2977
ID de Referência: 2977
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.