0

次のように画像を使用している 3 つの「タブ」があります。

ここに画像の説明を入力

各タブには 3 つの画像があります:-

  • bookaccount.png (デフォルト - オレンジ)
  • bookaccount-a.png (アクティブ - 白)
  • bookaccount-h.png (ホバー - 青)

bookcash.png と bookguest.png も同様です。

デフォルトでは、「Guest」をアクティブなタブのままにし、他のタブをオレンジ色にします。これは私が持っているものです:

<div id="main-online-user">

    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"><img alt="One 2 One Guest" id="img-onlinebooking-guest" class="left" src="images/bookguest-a.png" /></a>

    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login.php')"><img alt="One 2 One Account" id="img-onlinebooking-acc" class="left" src="images/bookaccount.png" /></a>

    <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"><img alt="One 2 One Cash" id="img-onlinebooking-cash" class="left" src="images/bookcash.png" /></a>

</div>

ホバーイベントについては、現時点では次のようにしています:-

    $("#img-onlinebooking-guest").hover(function() { 
         $(this).attr("src", "images/bookguest-h.png");
    });

    $("#img-onlinebooking-guest").mouseleave(function() { 
         $(this).attr("src", "images/bookguest.png");
    });

問題は、(Guest is active - white) ということです。その上にカーソルを合わせると、その要素を離れると、まだアクティブなタブであるときに画像がオレンジ色 (デフォルト) に戻ります。

私ができるようにしたいのは、次のいずれかです：-

画像がアクティブな要素である場合、その上にカーソルを置いても何も起こりません。（これはおそらくより良いオプションです）

または、アクティブな要素がホバーされている場合、mouseout で、mouseenter イベントの前の色に戻ります。

どうすればいいのかわからないので、助けていただければ幸いです！

(jQuery タブを使用できることはわかっていますが、クライアントはこれらの画像を必要としているため、選択の余地がありません)

編集：：

「アクティブ」クラスを #img-onlinebooking-guest に追加し、jQuery を次のように変更しました:-

    $("#img-onlinebooking-guest").click(function() { 

         $(this).addClass('active');
         $('#img-onlinebooking-cash, #img-onlinebooking-acc').removeClass('active');
         $(this).attr("src", "images/bookguest-a.png");
         $('#img-onlinebooking-acc').attr("src", "images/bookaccount.png");
         $('#img-onlinebooking-cash').attr("src", "images/bookcash.png");

    });

    $("#img-onlinebooking-acc").click(function() { 

         $(this).addClass('active');
         $('#img-onlinebooking-guest, #img-onlinebooking-cash').removeClass('active');
         $(this).attr("src", "images/bookaccount-a.png");
         $('#img-onlinebooking-guest').attr("src", "images/bookguest.png");
         $('#img-onlinebooking-cash').attr("src", "images/bookcash.png");

    });

    $("#img-onlinebooking-cash").click(function() { 
         $(this).addClass('active');
         $('#img-onlinebooking-guest, #img-onlinebooking-acc').removeClass('active');
         $(this).attr("src", "images/bookcash-a.png");
         $('#img-onlinebooking-guest').attr("src", "images/bookguest.png");
         $('#img-onlinebooking-acc').attr("src", "images/bookaccount.png");

    });

    $('#img-onlinebooking-guest:not(.active)').hover(

        function () {
            $(this).attr("src", "images/bookguest-h.png");
        },

        function () {
            $(this).attr("src", "images/bookguest.png");

    });

    $('#img-onlinebooking-acc:not(.active)').hover(

        function () {
            $(this).attr("src", "images/bookaccount-h.png");
        },

        function () {
            $(this).attr("src", "images/bookaccount.png");

    });

    $('#img-onlinebooking-cash:not(.active)').hover(

        function () {
            $(this).attr("src", "images/bookcash-h.png");
        },

        function () {
            $(this).attr("src", "images/bookcash.png");

    });

非常に面倒ですが、とにかく、HTML 内にクラス「アクティブ」を追加した「ゲスト」タブでは機能しますが、他のタブでは正しく機能しません。「Cash」をクリックすると、画像がアクティブ（白）になりますが、クリック時にこの要素にクラス「active」を追加したため、白のままにする必要がある場合でも、マウスアウトでは色がオレンジ（デフォルト）に戻ります。

何か案は？

これはここで見ることができます。リンク

4

3 に答える 3

2

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

画像をクリックすると、クラスが呼び出されます。active

$("#img-onlinebooking-guest").click(function () {
    $(this).addClass('active');
});

アクティブ リンクでない場合は、ホバー ロジックを実行できます。

$('#img-onlinebooking-guest:not(.active)').hover(

function () {
    $(this).attr("src", "images/bookguest-h.png");
},

function () {
    $(this).attr("src", "images/bookguest.png");
});
于 2013-04-01T10:28:07.467 に答える