Javascript 基于图像地图链接显示的不同内容_Javascript_Jquery_Slidetoggle_Imagemap

Javascript 基于图像地图链接显示的不同内容

javascript jquery

Javascript 基于图像地图链接显示的不同内容,javascript,jquery,slidetoggle,imagemap,Javascript,Jquery,Slidetoggle,Imagemap,我有一个映射到页面底部3个链接的图像。单击链接可从底部将相关内容滑入视图。再次单击链接将使内容消失假设我单击了链接1，以便内容1可见。如果单击链接2，则还会显示内容2。我想要的是，当我点击链接2时，内容1消失，内容2显示。等等是否可以修改我下面的内容来实现这一点在下面发布代码，并提供示例例子 jQuery（文档）.ready（函数（）{ jQuery（“#关于文本链接”）。单击（函数（）{ jQuery（“#关于文本”）.slideToggle（'slow'）； jQuery（thi

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

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

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

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


例子
jQuery（文档）.ready（函数（）{
jQuery（“#关于文本链接”）。单击（函数（）{
jQuery（“#关于文本”）.slideToggle（'slow'）；
jQuery（this.toggleClass（'active'）；
返回false；
});
jQuery（“#版本文本链接”）。单击（函数（）{
jQuery（“#编辑文本”）.slideToggle（'slow'）；
jQuery（this.toggleClass（'active'）；
返回false；
});
jQuery（“#联系人文本链接”）。单击（函数（）{
jQuery（“#联系文本”）.slideToggle（'slow'）；
jQuery（this.toggleClass（'active'）；
返回false；
});
});
.菜单{
背景色：#FFFFFF；
显示：无；
溢出：隐藏；
边框：1px实心#中交；
}
#底块{
位置：绝对位置；
宽度：435px；
左：50%；
左边距：-218px；
}
#底块{
底部：0；
}
关于文本
版本文本
联系文本

您可以使用

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>


例子
jQuery（文档）.ready（函数（）{
jQuery（“#关于文本链接”）。单击（函数（）{
jQuery（“#关于文本”）.slideToggle（'slow'）；
document.getElementById（“编辑文本”）.style.display=“无”/>
document.getElementById（“联系人文本”）.style.display=“无”/>
jQuery（this.toggleClass（'active'）；
返回false；
});
jQuery（“#版本文本链接”）。单击（函数（）{
jQuery（“#编辑文本”）.slideToggle（'slow'）；
document.getElementById（“关于文本”）.style.display=“无”/>
document.getElementById（“联系人文本”）.style.display=“无”/>
jQuery（this.toggleClass（'active'）；
返回false；
});
jQuery（“#联系人文本链接”）。单击（函数（）{
jQuery（“#联系文本”）.slideToggle（'slow'）；
document.getElementById（“关于文本”）.style.display=“无”/>
document.getElementById（“编辑文本”）.style.display=“无”/>
jQuery（this.toggleClass（'active'）；
返回false；
});
});
//-->添加行
.菜单{
背景色：#FFFFFF；
显示：无；
溢出：隐藏；
边框：1px实心#中交；
}
#底块{
位置：绝对位置；
宽度：435px；
左：50%；
左边距：-218px；
}
#底块{
底部：0；
}
关于文本
版本文本
联系文本
非常有魅力！为此非常感谢。
<!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>