0

3 つの異なる背景画像を持つ 3 つの「li」アイテムを保持するナビゲーション div を含む 1 ページのポートフォリオがあり、ホバーすると「li」アイテムごとに異なる背景画像があります。

#nav li.portfolio a:link, #nav li.portfolio a:visited {background:url(../img/icon_folio.png) no-repeat 10px 5px; display:block;}
#nav LI.portfolio a:hover, #nav LI.portfolio a:active, li.portfolio.active {background:url(../img/icon_folio.png) no-repeat 10px -100px;}

#nav li.about a:link, #nav li.about a:visited {background:url(../img/icon_me.png) no-repeat 10px 5px; display:block;}
#nav li.about a:hover, #nav li.about a:active {background:url(../img/icon_me.png) no-repeat 10px -105px;}

私が望むのは、クリックされたときに各リンクをターゲットにして、選択した要素にすることです。$('#nav li a').click(function(){ $('#nav li').removeClass('active'); $(this).parent().addClass('active'); });

このコードの問題は、現在の背景の背後にある新しい背景を呼び出すことです!

クリックしたときに現在の背景を実際に削除し、ホバーで使用されているものに置き換える方法はありますか??

事前にどうもありがとう、私はこのウェブサイトを通じて多くの問題を学び、修正しました!

4

2 に答える 2

1

あなたはこれを試すことができます：

$('#nav li a').toggle(

        function() {

            $('#nav li').removeClass('inactive').addClass('active');

            },
        function() {

            $('#nav li').addClass('inactive').removeClass('active');
        }

    );

「アクティブ」と「非アクティブ」ごとに異なる背景を持つ

JquerytoggleClassも見ることができます.toggleClass()

于 2011-06-06T02:49:16.490 に答える
1

どうもありがとう@ Alfie-101、あなたのソリューションは私にインスピレーションを与えました。私のアプローチが十分にきちんとしているかどうかはわかりませんが、それは魅力のように機能します

$('#nav li').addClass('inactive');

$('#nav li a').click(function(){

    $('#nav li').removeClass('active').addClass('inactive');

    $(this).parent().removeClass('inactive').addClass('active');

    });`
于 2011-06-06T17:26:56.983 に答える