圖片映射onclick問題

Question

大家好，我對該代碼有疑問：

 $("#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次點擊后重新加載頁面？ 我需要頁面不重新加載，單擊縮略圖可以讓我看到相應的圖像。 但是，如果將此代碼與兩個圖像一起使用，則不會有問題。 問題是當圖像大於兩個時。

不要在這里運行代碼，在這里不起作用。

Answer 1

似乎與具有相同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>