0

リンクにアクティブな状態を追加しようとすると、問題が発生します。これは私が遊んでいるコードです:

$(function () {

    $('a').click(function () {
        $(this).addClass('PnavCurrent');
        //$("div a").removeClass("PnavCurrent");
        //$("div a[href="+newHash+"]").addClass("PnavCurrent");

        $(this).removeClass('PnavCurrent');
        $(this).css('color', '#51ad9d');
        $(this).css('z-index', '2');
        $(this).css('border-color', '#00a8ff');

        $('a').hover($(this).css('z-index', '10'));
    });
});

何らかの理由で、リンクに css アクティブ ステート クラス (「PnavCurrent」) が適用されませんが、スクリプト コードで{$(this).css...}. 今私が望むのは、スクリプト コード内のリンクにホバー状態の z-index を追加することです。次のようになります。

 $('a').hover($(this).css ('z-index', '10'));

これを達成するために上記のコードの小さなブロックを使用しようとしましたが、うまくいきません。誰かがこれを手伝ってくれて、おそらく全体的により良い解決策を提供してくれれば幸いです。

4

1 に答える 1

1

CSS:

.PnavCurrent {
    color: #51ad9d;
    z-index: 2;
    border-color: #00a8ff;
}

.PnavCurrent:hover { z-index: 10; }

Javascript:

$(function() {
    $('a').click(function(e) {
        // you usually want to prevent default for handling link clicks,
        // otherwise the browser follows the href (if that's intended skip this)
        e.preventDefault();

        $('a').not(this).removeClass('PnavCurrent');
        $(this).addClass('PnavCurrent');
    });
});

jQuery.hover()に関する注意: ここではまったく必要ありませんが、使用法は次のようになります (これはcssルールの代わりであり、一緒には使用されません)。:hover

$("a").hover(
    function () {
        $(this).css('z-index',2));
    }, 
    function () {
        $(this).css('z-index', 10);
    }
);
于 2012-07-20T01:40:17.300 に答える