基于图像映射链接显示的不同内容

我有一个图像映射到页面底部的3个链接。点击链接将相关内容从底部滑入视图。再次单击链接将使内容消失。基于图像映射链接显示的不同内容

可以说我点击了链接1，以便内容1可见。如果我然后单击链接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

工程就像一个魅力！非常感谢。 – 2013-04-26 14:25:49

基于图像映射链接显示的不同内容

回答

相关问题