0

「ログイン」と「登録」の 2 つのボタンがあるスプラッシュ ページがあります。コードをいじってこれまでに得たものは次のとおりです。 1. ボタンをクリックすると、ログインおよび登録フォーム (div) が展開されます。2. 他のフォームが既に表示されている場合は非表示にします (一度に 1 つのフォームのみが表示され、一度に 1 つのボタンのみが「押された状態」になります)。3. 押されたときにボタンの背景を変更し、それぞれのパネルが表示されます。

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

$(function() {
                $('#login').click(function() {
                    $('.login').slideToggle('fast');
                    $('.register:visible').slideToggle('fast');
                    $("#register").css("background", "rgba(255,0,0,0.8)");
                    $("#login").css("background", "rgba(255,0,0,0.6)");
                    return false;
                });
                $('#register').click(function() {
                    $('.register').slideToggle('fast');
                    $('.login:visible').slideToggle('fast');
                    $("#login").css("background", "rgba(255,0,0,0.8)");
                    $("#register").css("background", "rgba(255,0,0,0.6)");
                    return false;
                });
            });

上記のコードの問題は、両方のパネルを非表示にすると、ボタンの 1 つが「押された状態」rgba(255,0,0,0.6) を保持することです。また、ボタンが押されていないときにホバー効果を追加したいと思います。 、どうすればそれもできますか？

よろしくお願いします。私はjqueryの初心者で、苦労しています..

4

1 に答える 1

0

まず、CSS プロパティを直接変更するのではなく、CSS クラスを追加および削除することをお勧めします。これにより、いくつかのバグが解消される可能性がありますが、確かではありません。$('#register').addClass('btnClicked');

次のようにホバー効果を追加できます。

$('#login, #register').hover(function() {
    $(this).addClass('btnHover');
}, function() {
    $(this).removeClass('btnHover');
}

スタイルを維持したい場合は、最初の関数にホバリング CSS コードを配置し、2 番目の関数で通常の状態に戻します。

于 2013-04-24T15:49:16.220 に答える