jquery y toggleClass

I have a website with a script. When you click on a link, it toggle pages and the link itself is toggled as well using the toggleClass method from jquery.

The script was working fine, but the pages were loaded on top of each other, so I've changed it a bit. If you click on a link for the first time, the link changes (bigger) and the page appear. The value of the link is stored in a variable (previousClick). Now, if I click on a second link, the previous page disappear and the new one appears. This works fine. But the previous link stays bigger. I can't find out how to revert it back to a smaller font ...

Aquí está el código:

var pages = function()
    var nav = $( 'ul#nav li a' );
    var previousClick = '';

    nav.click( function()
        if (previousClick.length==0)
            $( this ).parent().toggleClass( 'selected' );
            $( $( this ).attr( 'href' ) + '-page' ).toggle( 500 );
            previousClick = $( this ).attr( 'href' );
            return false;
            $('li a [href=' + previousClick + ']').toggleClass( 'selected' );
            $( previousClick + '-page' ).toggle( 500 );
            $( this ).parent().toggleClass( 'selected' );
            $( $( this ).attr( 'href' ) + '-page' ).toggle( 500 );
            previousClick = $( this ).attr( 'href' );
            return false;   

$( window ).load( pages );

El css:

ul#nav li { padding: 1px; }
ul#nav li a
    font: italic normal 20px/normal 'Palatino Linotype', Georgia, Comic sans MS, Times, Serif;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    position: relative;
    z-index: 3;
    color: #fff;
    display: block;
ul#nav li a span
    font-size: 28px;
    font-family: Baskerville, Palatino, 'Palatino Linotype', Georgia, Serif;
    /*color: #3b0314;*/
    color: #FEDB00;
ul#nav li a:hover,
ul#nav li.selected a
    font-size: 200%;

And the menu in html:

<ul id="nav">
    <li id="star-top"></li>
    <li><a href="#société"><span>Qui</span>sommes nous?</a></li>
    <li><a href="#coachingé">Coaching<span>à</span>domicile</a></li>
    <li><a href="#entrainementé"><span>Plan</span>d'entrainement</a></li>
    <li><a href="#aquatiqueé"><span>Activités</span>aquatiques</a></li>
    <li><a href="#entreprisé"><span>Espace</span>Entreprise</a></li>
    <li id="star-bot"></li>
    <li><a href="#contact">Contactez<span>nous</span></a></li>
    <li><a href="#partenaire"><span>Nos</span>partenaires</a></li>

Muchas gracias

preguntado el 08 de enero de 11 a las 19:01

1 Respuestas

I think, because you are using $( this ).parent().toggleClass( 'selected' );, you should also use:

$('li a[href=' + previousClick + ']').parent().toggleClass( 'selected' );

en lugar de

$('li a [href=' + previousClick + ']').toggleClass( 'selected' );


Or, even better, use:

$('#nav li:has(a[href=' + previousClick + '])').toggleClass('selected');

yo añadí #nav porque :has matches all descendants, not only direct children. So, if your #nav is wrapped in another <li>, that would get its class toggled as well.


Ah, I see it now. It's very subtle: a [href=...] means "a tag that has an attribute href con valor ... dentro de un a tag". So, it would match <a><a href="..."></a></a>, which is not what we want. You should use a[href=...], without the space.

Respondido el 10 de enero de 11 a las 11:01

Hi norman, Thanks for spending some time on this. I've tried both workaround and it didn't work :-( $('li a [href=' + previousClick + ']').toggleClass( 'selected' ); and $('li a [href=' + previousClick + ']').toggleClass( 'selected' ); - oliva

Hi Olivier, I see now, you had to remove a space as well. See my edit. - Normando espinoso

Wow ... well done ! It worked fine without the space ... Thanks a lot Norman. Have a nice day. - oliva

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.