¿Cómo puedo agregar una clase a la página actual y a la página o carpeta del directorio principal para poder aplicar estilos CSS?
Por ejemplo:
root |- Products |- Notebook |- Pencil |- BagsActualmente visitando: www.domain.com/products/notebooks
<a href="/products" class="current"> Product </a> <a href="/products/notebook" class="current"> Notebook </a> <a href="/products/pencil"> Pencil </a> <a href="/products/bags"> Bags </a>Resultado:
Productos
Cuadernos || Lápiz || Bolsas
Estoy intentando algo como esto pero sin éxito.
push(function() { var curUrl = location.pathname; $('a').each(function() { $(this).toggleClass('current', curUrl.indexOf($(this).attr('href')) != -1); });Encontrar la URL en la ubicación funciona, vea el fragmento a continuación (no use location.pathname solo para el fragmento, por supuesto, guárdelo en su código).
El push(function() { ... que rodea la función tal vez no sea necesario. Solo espere a que el documento esté listo.
var curUrl = 'https://example.com/shop/products/notebook'; //location.pathname; $('a').each(function() { $(this).toggleClass('current', curUrl.indexOf($(this).attr('href')) != -1); }); * { margin: 0; padding; 0; } a { font-size: 14px; text-decoration: none; margin: 4px; } a.current { font-weight: bold; } <a href="/products"> Product </a> <a href="/products/notebook"> Notebook </a> <a href="/products/pencil"> Pencil </a> <a href="/products/bags"> Bags </a> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>