이미지 맵 내가 그 코드에 문제가 문제

Question

안녕 얘들 아 온 클릭 : 페이지는 2-3 클릭 한 후

$("#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>

를 다시로드 왜? 페이지가 다시로드되지 않고 축소판을 클릭하면 해당 이미지가 표시됩니다. 그러나 두 개의 이미지와 함께이 코드를 사용하면 문제가 없습니다. 이미지가 두 개 이상일 때 문제가 발생합니다.

여기에서 코드를 실행하지 마십시오. 여기서 작동하지 않습니다.

Answer 1

동일한 ID (잘못된 HTML)를 가진 여러 요소와 관련이있는 것 같습니다. 내가 클래스에 중복 ID를 변경하는 경우

, 페이지가 더 이상 나를 위해 다시로드하지 않습니다

$(".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>