Tengo un menú con un marcado simple, y mi objetivo es agregar una clase al elemento del menú <li> automáticamente por el nombre de la página actual ...

El marcado relevante es:

    <ul class="sub-menu">
        <li >    
            <a href="page_example_one.html">

            <i class="icon-time"></i>

            Timeline</a>    
        </li>    
        <li >    
            <a href="page_example_two.html">

            <i class="icon-cogs"></i>

            Page Two</a>    
        </li>
.... Many other elements 
    </ul>

Lo que necesito obtener es muy simple, cuando estoy en una página determinada (supongamos page_example_one.html ) Necesitaría el elemento <li> correspondiente para tener una clase adicional como esta

<li class="active">

    <a href="page_example_one.html">

    <i class="icon-time"></i>

    Timeline</a>

</li>

Traté de hacer eso con jQuerylike así:

jQuery(document).ready(function() {

     // Get the current page name ( pathname)
            var currentUrl =  jQuery(location).attr('pathname');

            // Get the element ( try at least )
            var currentMenuItem = jQuery("sub-menu li a[href='" + currentUrl + "']");

            // Add the class
            currentMenuItem.addClass("active");

                //Tried also something like this : 
                // jQuery("sub-menu li a[href='" + currentUrl + "']").find('a').addClass("active");


        });

Ambos métodos anteriores fallaron para mí (el comentado con VAR y el concatenado) Pero debido a que mis habilidades de JS son muy bajas, realmente no puedo ver lo que estoy haciendo mal (probablemente algo realmente obvio para alguien que conoce JS)

Después de resolver este problema, también me gustaría saber cómo agregar tramos o clases también a un elemento del menú principal (en el caso del submenú) en función del enlace de la página actual ...

0
krembo99 3 sep. 2014 a las 20:47

2 respuestas

La mejor respuesta
var currentMenuItem = jQuery("a[href='" + currentUrl + "']").parent()

Agregue una demostración aquí

1
chestnut 3 sep. 2014 a las 17:24

Apunte al submenú por su clase ul.sub-menu. alternativamente, también puede apuntar de manera más general a todos los artículos con la clase por .sub-menu. sub-menu solo apuntaría a un elemento teórico <sub-menu>.

Que obtener el padre (el <li>) del enlace:

var currentMenuItem = jQuery(".submenu li a[href='" + currentUrl + "']").parent();

Compruebe también si currentUrl es igual a href. puede generar currentUrl en la consola para la depuración de esta manera:

console.log(currentUrl);
1
dreamlab 3 sep. 2014 a las 17:14