jquery 和切换类

Question

我有一个带有脚本的网站。 当您单击一个链接时，它会切换页面，并且链接本身也会使用 jquery 中的 toggleClass 方法进行切换。

脚本运行良好，但页面加载在彼此之上，因此我对其进行了一些更改。 如果您第一次单击链接，则链接会更改（更大）并出现页面。链接的值存储在变量 (previousClick) 中。 现在，如果我点击第二个链接，前一页就会消失，而新的一页就会出现。这工作正常。但是之前的链接仍然更大。我不知道如何将其恢复为较小的字体...

代码如下：

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

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%;
}

还有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>

非常感谢

Answer 1

我认为，因为你使用的是$( this ).parent().toggleClass( 'selected' );，你也应该使用：

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

而不是

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

编辑：

或者，更好的是，使用：

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

我添加了#nav，因为:has 匹配所有后代，而不仅仅是直系子代。因此，如果您的 #nav 包含在另一个 <li> 中，那么它的类也会被切换。

编辑：

啊，我现在明白了。这是非常微妙的：a [href=...] 的意思是“在a 标签内具有属性href 和值... 的标签”。所以，它将匹配<a><a href="..."></a></a>，这不是我们想要的。你应该使用a[href=...]，没有空格。