2

サイトの現在のナビゲーションアイコンを強調表示する方法を見つけようとしています。ブログセクションを除いて、他のすべてのナビゲーションリンクは同じページの異なるセクションに移動するため、より複雑になっています。ユーザーが私のブログセクションにいない限り、すべてのインスタンスでホームアイコンを強調表示したいと思います。CSSを使用してアイコンの不透明度を0.5に設定し、アイコンを強調表示するためにJQueryを使用してクラスを追加し、不透明度を1に変更しました。ほぼそこにいますが、ユーザーがブログセクションに移動してからホームに戻るとセクションでは、アイコンは強調表示されません（ブラウザを更新しない限り）。これが私のJQueryです：

 // change opacity of nav icons
    $('#nav-home, #nav-port, #nav-exp, #nav-cont, #nav-blog').hover(function(){
        $(this).fadeTo(200, 1);
        }, function(){
        $(this).fadeTo(200, 0.5);
    });

    // highlight current nav icon
    var queryString = location.search.replace('?','').split('=');

    $('#nav-blog').bind('load click', function(){
        if(queryString[1] == 'blog-home' || queryString[0] == 'article')
            $(this).addClass('nav-current');
        });

    $('#nav-home, #nav-port, #nav-exp, #nav-cont').bind('load click', function(){
        if(queryString[1] == 'home' || !queryString[1])
            $('#nav-home').addClass('nav-current');
    });

ありがとうございました！

編集：ごめんなさい！これが私のサイトですhttp://www.jonhudsonweb.com

編集：それを理解しました!! しかし、私は十分ではないので、私はまだ私の質問に答えることを許可されていません:(

これが私の解決策です：

 // highlight current nav icon
        var queryString = location.search.replace('?','').split('=');

        $(window).bind('load unload', function(){
            if(queryString[1] == 'blog-home' || queryString[0] == 'article')
                $('#nav-blog').addClass('nav-current');
            });

        $(window).bind('load unload', function(){
            if(queryString[1] == 'home' || !queryString[1])
                $('#nav-home').addClass('nav-current');
        });

私にとっては+1！

わーい。

4

2 に答える 2

1

ジョン、あなたの解決策は私には少し厄介に見えます。.active常にアクティブに見せたいアイコンにクラスを追加し、CSSでスタイルを設定してみませんか？

さらに、実際には、すべてのナビゲーションアイコンを統合するクラスを使用し、.hover()各IDを一覧表示するのではなく、メソッドに対してそのクラスを参照する必要があります。偶然にも、私は自分のサイトで同じことをしています。

于 2012-09-27T08:57:16.783 に答える
0

私の解決策：

// highlight current nav icon
    var queryString = location.search.replace('?','').split('=');

    $(window).bind('load unload', function(){
        if(queryString[1] == 'blog-home' || queryString[0] == 'article')
            $('#nav-blog').addClass('nav-current');
        else 
            $('#nav-home').addClass('nav-current');
        });
于 2012-09-27T08:42:20.480 に答える