이미지 맵 링크를 기준으로 표시된 다른 콘텐츠

페이지 아래쪽에 3 개의 링크로 매핑 된 이미지가 있습니다. 링크를 클릭하면 관련 내용을 아래에서부터 볼 수 있습니다. 링크를 다시 클릭하면 내용이 사라집니다.이미지 맵 링크를 기준으로 표시된 다른 콘텐츠

링크 1을 클릭하면 콘텐츠 1이 표시됩니다. 그런 다음 링크 2를 클릭하면 내용 2가 표시됩니다. 내가 원하는 것은 링크 2를 클릭하면 내용 1이 사라지고 내용 2가 표시된다는 것입니다.

내가 이것을 달성하기 위해 무엇을 수정할 수 있습니까? 예 : here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Example</title> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript"> 
     jQuery(document).ready(function() { 
      jQuery('#about-text-link').click(function() { 
      jQuery('#about-text').slideToggle('slow'); 
      jQuery(this).toggleClass('active'); 
      return false; 
      }); 
      jQuery('#editions-text-link').click(function() { 
      jQuery('#editions-text').slideToggle('slow'); 
      jQuery(this).toggleClass('active'); 
      return false; 
      }); 
      jQuery('#contact-text-link').click(function() { 
      jQuery('#contact-text').slideToggle('slow'); 
      jQuery(this).toggleClass('active'); 
      return false; 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     .menu { 
     background-color: #FFFFFF; 
     display: none; 
     overflow: hidden; 
     border: 1px solid #CCCCCC; 
     } 

     #bottom-block { 
     position: absolute; 
     width: 435px; 
     left: 50%; 
     margin-left: -218px; 
     } 

     #bottom-block { 
     bottom: 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="page"> 
     <div id="bottom-block"> 
      <img src="menu.png" width="435px;" height="34px;" usemap="#map" /> 
      <map id="_map" name="map"> 
       <area shape="rect" coords="11,6,102,29" href="#" alt="about" title="about" id="about-text-link" /> 
       <area shape="rect" coords="109,6,286,29" href="#" alt="editions" title="editions" id="editions-text-link" /> 
       <area shape="rect" coords="295,6,410,29" href="#" alt="contact" title="contact" id="contact-text-link" /> 
      </map> 
      <div class="menu" id="about-text"> 
       About text 
      </div> 
      <div class="menu" id="editions-text"> 
       Editions text 
      </div> 
      <div class="menu" id="contact-text"> 
       Contact text 
      </div> 
     </div> 
    </div> 
</body> 
</html>

출처

2013-04-26 Mikkel Gadegaard

당신은 다른 요소를 숨기기 위해 document.getElementById(id).style.display = "none";으로이 작업을 수행 할 수 코드의 코드를 추가했다. 잘하면이 도움이됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html> 
    <head> 
     <title>Example</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script type="text/javascript"> 
      jQuery(document).ready(function() { 
       jQuery('#about-text-link').click(function() { 
       jQuery('#about-text').slideToggle('slow'); 
       document.getElementById("editions-text").style.display = "none"; //--> 
       document.getElementById("contact-text").style.display = "none"; //--> 
       jQuery(this).toggleClass('active'); 
       return false; 
       }); 
       jQuery('#editions-text-link').click(function() { 
       jQuery('#editions-text').slideToggle('slow'); 
       document.getElementById("about-text").style.display = "none"; // --> 
       document.getElementById("contact-text").style.display = "none"; // --> 
       jQuery(this).toggleClass('active'); 
       return false; 
       }); 
       jQuery('#contact-text-link').click(function() { 
       jQuery('#contact-text').slideToggle('slow'); 
       document.getElementById("about-text").style.display = "none"; // --> 
       document.getElementById("editions-text").style.display = "none"; // --> 
       jQuery(this).toggleClass('active'); 
       return false; 
       }); 
      }); 

      //--> added lines 
     </script> 
     <style type="text/css"> 
      .menu { 
      background-color: #FFFFFF; 
      display: none; 
      overflow: hidden; 
      border: 1px solid #CCCCCC; 
      } 

      #bottom-block { 
      position: absolute; 
      width: 435px; 
      left: 50%; 
      margin-left: -218px; 
      } 

      #bottom-block { 
      bottom: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="page"> 
      <div id="bottom-block"> 
       <img src="menu.png" width="435px;" height="34px;" usemap="#map" /> 
       <map id="_map" name="map"> 
        <area shape="rect" coords="11,6,102,29" href="#" alt="about" title="about" id="about-text-link" /> 
        <area shape="rect" coords="109,6,286,29" href="#" alt="editions" title="editions" id="editions-text-link" /> 
        <area shape="rect" coords="295,6,410,29" href="#" alt="contact" title="contact" id="contact-text-link" /> 
       </map> 
       <div class="menu" id="about-text"> 
        About text 
       </div> 
       <div class="menu" id="editions-text"> 
        Editions text 
       </div> 
       <div class="menu" id="contact-text"> 
        Contact text 
       </div> 
      </div> 
     </div> 
    </body> 
    </html>

출처

2013-04-26 14:10:41 notknown7777

매력처럼 작동합니다! 그렇게 해줘서 고맙습니다. –

이미지 맵 링크를 기준으로 표시된 다른 콘텐츠

답변

관련 문제