Question

JQUERY CODE

$(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 CODE

<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>

基本上，当用户点击三个图像中的一个时，jquery应该淡入/淡出相关内容。这在jsfiddle，IE和firefox中运行良好，但在chrome和safari中没有。

可以在此处查看实时链接：http://www.alexkearns.co.uk/35norwich/scouts/index.php

Answer 1

你的格式是正确的，因为http://www.alexkearns.co.uk/35norwich/scouts/index.php可以点击你的img。

但是你提供的html和js代码会响应chrome，firefox和IE中的点击事件。

那么，我们如何重现这个问题？

Answer 2

从

更改jquery网址的来源

<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>

Answer 3

我通过使用涉及PHP的解决方法修复了它，并且只有在设置了特定的GET变量时才显示内容

jQuery点击事件仅在Chrome和Safari中触发一次

3 个答案: