1

Jクエリコード

$(document).ready(function(){

$('#about').css("opacity","0");
$('#decoy').css("opacity","0");
$('#clickabout').css("opacity","0.2");
$('#clickdecoy').css("opacity","0.2");

function clickhq(){

   $('#clickhq').css("opacity","1");
    $('#clickabout').css("opacity","0.2");
    $('#clickdecoy').css("opacity","0.2");
    $('#hq').animate({opacity:"1"},2000);
    $('#about').animate({opacity:"0"},1000);
    $('#decoy').animate({opacity:"0"},1000);
}

function clickabout(){

    $('#clickhq').css("opacity","0.2");
    $('#clickabout').css("opacity","1");
    $('#clickdecoy').css("opacity","0.2");
    $('#hq').animate({opacity:"0"},1000);
    $('#about').animate({opacity:"1"},2000);
    $('#decoy').animate({opacity:"0"},1000);
}

function clickdecoy(){

    $('#clickhq').css("opacity","0.2");
    $('#clickabout').css("opacity","0.2");
    $('#clickdecoy').css("opacity","1");
    $('#hq').animate({opacity:"0"},1000);
    $('#about').animate({opacity:"0"},1000);
    $('#decoy').animate({opacity:"1"},2000);

}

$("#clickhq").on('click',clickhq);

$("#clickabout").on('click',clickabout);

$("#clickdecoy").on('click',clickdecoy);

});

HTMLコード

<div id="content">

<div id="activityicons">
<img id="clickhq" src="images/hq.png" width="139" height="139" />
<img id="clickabout" src="images/out.png" width="139" height="139" />
<img id="clickdecoy" src="images/decoy.png" width="139" height="139" />
</div>

<div id="activityiconstext">

<div id="hq">
</div>

<div id="about">
</div>

<div id="decoy">
</div>

</div>

</div>

基本的に、ユーザーが 3 つの画像のいずれかをクリックすると、jquery は関連するコンテンツをフェードイン/フェードアウトする必要があります。これは jsfiddle、IE、firefox では正常に機能しますが、chrome と safari では機能しません。

ライブリンクはここで見ることができます: http://www.alexkearns.co.uk/35norwich/scouts/index.php

4

3 に答える 3

0

あなたの img はhttp://www.alexkearns.co.uk/35norwich/scouts/index.phpで一度クリックできるという点で正しいです。

しかし、提供された html および js コードは、chrome、firefox、および IE 内のクリック イベントに応答します。

では、問題を再現するにはどうすればよいでしょうか。

于 2013-07-30T23:06:31.487 に答える
0

jquery URL のソースを

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

に

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
于 2013-07-30T23:28:43.660 に答える
0

PHP を含む回避策を使用して修正し、特定の GET 変数が設定されている場合にのみコンテンツを表示するようにしました

于 2013-07-31T09:53:47.033 に答える