jquery and toggleClass

Question

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 ...

Here is the code:

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;
        }
        else
        {
            $('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 );

The 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>
</ul>

Thanks a lot

Answer 1

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

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

instead of

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

EDIT:

Or, even better, use:

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

I added #nav because :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.

EDIT:

Ah, I see it now. It's very subtle: a [href=...] means "a tag that has an attribute href with value ... inside an 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.