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

これを行う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-26T14:10:41.237 に答える