0

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

假设我点击了链接 1，以便内容 1 可见。如果我然后单击链接 2 内容 2 也会显示。我想要的是，当我单击链接 2 时，内容 1 消失并显示内容 2。等等

是否可以修改我下面的内容来实现这一目标？

在下面发布代码，并在此处提供示例。

<!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>
4

1 回答 1

1

您可以使用 adocument.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-26T14:10:41.237 回答