2

index.html という 1 つのページに存在する Web サイトがあります。サイトには多くのコンテンツがあります (多くの「ページ」にあるように見えます) が、javascript と CSS を介して、すべての情報が index.html に含まれています。

そのため、「ホーム」ポジションと「インサイド」ポジション (ホーム ページとインサイド ページなど) が存在し、ユーザーがインサイド ページとホーム ページにいる場合に異なる動作をするリンクが必要です。したがって、「内部」リンクがクリックされると、そのdiv内のリンクの動作が異なると思われるクラスをdivから削除します。しかし、彼らは私の期待どおりに振る舞っていません。

この例のために非常に馬鹿げたページは次のとおりです。

http://littleduck.com/ns_sample/index.html

この例では、ホームページと「サービス」ページのみがあります。それらの間を前後にリンクできます。

左側の灰色のリンク (コードでは「バルーン」と呼ばれます) にマウスを合わせると、ホバー カラーが表示され、ポップアップ グラフィックが表示されます。ページが「ホーム」の位置にある場合にのみ、これが発生することを望みます。このホバー/ポップアップ アクションを可能にする「popup_yes」というクラスがあります。index.html がロードされたときに表示され、それを削除するか、コードでその名前を変更すると、ホバー/ポップアップが機能しません。だから私はクラスが何かをしていることを知っています。ここで、「サービス」をクリックするとそのクラスを削除します。「popup_yes」が実際に削除されるChromeの要素を調べるとわかります。ただし...バルーンにマウスオーバーすると、ホバー/ポップアップアクションが引き続き発生します。

要素を調べると、コードで「popup_yes」がなくなっていることがわかりますが、Chrome ではまだ使用されています。これは、「ホーム」ページと「内部」ページで Inspect Element がどのように見えるかのスクリーンショットです。

http://i.stack.imgur.com/p1ZP7.jpg

では、私の脳のどこが脱線しているか教えてください。「サービス」ページを表示しているときにホバー/ポップアップ アクションが機能しないようにするにはどうすればよいですか? あなたが提供できるあらゆる助けに心から感謝します。

4

2 に答える 2

0

問題はマウスオーバー/アウトコードにあります

$(".popup_yes .balloon_1").mouseover(function() {
    $("#popup_1").show(400);
    $(".balloon_1").addClass("hover");
});

ページが読み込まれると、mouseover イベントがそのスパンにバインドされるため、関数にチェックを追加すると、そのアクションは既に確立されています。

$(".popup_yes .balloon_1").mouseover(function() {
    if ($('#balloons').hasClass('popup_yes') ){ //<--here
        $("#popup_1").show(400);
        $(".balloon_1").addClass("hover");
    }
    });

期待どおりに動作するはずです

于 2012-11-20T18:35:50.760 に答える
0

私はあなたが使用している JavaScript を修正し、それを機能させることができました。これが私が行った変更です。

まず、サービスページをクリックしてクラスを削除したときに、削除するクラスを指定しました。

$('#balloons').removeClass("popup_yes");

この後、ホームページに戻ってクリックすると、クラスを追加し直す必要があるため、$('#buttons')div をアニメーション化した後にこの行を含めました。

$("#balloons").addClass("popup_yes");

次に、各バルーンのホバー効果を変更します。最初のバルーン要素に加えた変更を示します。他の要素にも同じことを再現できます。

$(".balloon_1").mouseover(function() {
   if($(this).closest('#balloons').attr("class")=="popup_yes"){
      $("#popup_1").show(400);
      $(".balloon_1").addClass("hover");
     }
 });

$(".balloon_1").mouseout(function() {
    if($(this).closest('#balloons').attr("class")=="popup_yes"){
        $("#popup_1").hide(400);
        $(".balloon_1").removeClass("hover");
     }
});

私が変更したのは、ホバリングの両方のクラスをチェックする代わりに、クラスをチェックしたballoon_1だけで、id を持つそれに最も近い要素にballoonsclass がある場合にのみ効果がありましたpopup_yes。

クロムでやってみました。他のブラウザでもうまく動作することを願っています。

于 2012-11-20T18:30:08.130 に答える