1

スクリプト付きの Web サイトがあります。リンクをクリックすると、ページが切り替わり、リンク自体も jquery の toggleClass メソッドを使用して切り替えられます。

スクリプトは正常に機能していましたが、ページが重なって読み込まれていたため、少し変更しました。リンクを初めてクリックすると、リンクが変更され (大きくなり)、ページが表示されます。リンクの値は変数 (previousClick) に格納されます。2 つ目のリンクをクリックすると、前のページが消えて新しいページが表示されます。これはうまくいきます。しかし、前のリンクは大きくなっています。小さいフォントに戻す方法がわかりません...

コードは次のとおりです。

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>

どうもありがとう

4

1 に答える 1

2

$( 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=...]を持つ属性を持つタグ」を意味します。したがって、 に一致しますが、これは私たちが望んでいるものではありません。スペースなしで ,を使用する必要があります。href...a<a><a href="..."></a></a>a[href=...]

于 2011-01-08T19:38:26.023 に答える