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

Spiny Norman · Accepted Answer · 2011-01-10 08:31:18Z

2

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.

edited Jan 10, 2011 at 8:31

answered Jan 8, 2011 at 19:38

Spiny Norman

8,3271 gold badge34 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Olivier Over a year ago

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' );

Spiny Norman Over a year ago

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

Olivier Over a year ago

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

Collectives™ on Stack Overflow

jquery and toggleClass

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related