[英]Image map onclick problems
大家好,我对该代码有疑问:
$("#gotobikeblue").click(function(){ $("#bikeblue").show(); $("#motor").hide(); $("#wheel").hide(); return false; }); $("#gotomotor").click(function(){ $("#bikeblue").hide(); $("#motor").show(); $("#wheel").hide(); return false; }); $("#gotowheel").click(function(){ $("#bikeblue").hide(); $("#motor").hide(); $("#wheel").show(); return false; });
#bikeblue { display:none; } #wheel { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <img src="http://i62.tinypic.com/2l8jmzo.jpg" alt="" usemap="#motor" id="motor"/> <map id="motor" name="motor"> <area id="gotobikeblue" alt="" title="" href="" shape="rect" coords="1135,13,1261,123" style="outline:none;" target="_self" /> <area id="gotowheel" alt="" title="" href="" shape="rect" coords="1110,874,1265,997" style="outline:none;" target="_self" /> </map> <img src="http://i62.tinypic.com/14kv6zo.jpg" alt="" usemap="#bikeblue" id="bikeblue"/> <map id="bikeblue" name="bikeblue"> <area id="gotomotor" alt="" title="" href="" shape="rect" coords="10,9,103,92" style="outline:none;" target="_self" /> <area id="gotowheel" alt="" title="" href="" shape="rect" coords="899,666,1010,756" style="outline:none;" target="_self" /> </map> <img src="http://i58.tinypic.com/2qvw12x.jpg" alt="" usemap="#wheel" id="wheel"/> <map id="wheel" name="wheel"> <area id="gotomotor" alt="" title="" href="" shape="rect" coords="13,12,164,109" style="outline:none;" target="_self" /> <area id="gotobikeblue" alt="" title="" href="" shape="rect" coords="35,130,127,210" style="outline:none;" target="_self" /> </map>
为什么在2-3次点击后重新加载页面? 我需要页面不重新加载,单击缩略图可以让我看到相应的图像。 但是,如果将此代码与两个图像一起使用,则不会有问题。 问题是当图像大于两个时。
不要在这里运行代码,在这里不起作用。
似乎与具有相同ID(无效HTML)的多个元素有关。
如果我将重复的ID更改为class,该页面将不再为我重新加载:
$(".gotobikeblue").click(function(){
$("#bikeblue").show();
$("#motor").hide();
$("#wheel").hide();
return false;
});
$(".gotomotor").click(function(){
$("#bikeblue").hide();
$("#motor").show();
$("#wheel").hide();
return false;
});
$(".gotowheel").click(function(){
$("#bikeblue").hide();
$("#motor").hide();
$("#wheel").show();
return false;
});
和HTML:
<img src="http://i62.tinypic.com/2l8jmzo.jpg" alt="" usemap="#motor" id="motor"/>
<map id="motor" name="motor">
<area class="gotobikeblue" alt="" title="" href="" shape="rect" coords="1135,13,1261,123" style="outline:none;" target="_self" />
<area class="gotowheel" alt="" title="" href="" shape="rect" coords="1110,874,1265,997" style="outline:none;" target="_self" />
</map>
<img src="http://i62.tinypic.com/14kv6zo.jpg" alt="" usemap="#bikeblue" id="bikeblue"/>
<map id="bikeblue" name="bikeblue">
<area class="gotomotor" alt="" title="" href="" shape="rect" coords="10,9,103,92" style="outline:none;" target="_self" />
<area class="gotowheel" alt="" title="" href="" shape="rect" coords="899,666,1010,756" style="outline:none;" target="_self" />
</map>
<img src="http://i58.tinypic.com/2qvw12x.jpg" alt="" usemap="#wheel" id="wheel"/>
<map id="wheel" name="wheel">
<area class="gotomotor" alt="" title="" href="" shape="rect" coords="13,12,164,109" style="outline:none;" target="_self" />
<area class="gotobikeblue" alt="" title="" href="" shape="rect" coords="35,130,127,210" style="outline:none;" target="_self" />
</map>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.