如何将html加载到隐藏的div中?

时间:2016-10-10 13:43:07

标签: javascript jquery html load

我有一个页面设置,其中包含隐藏/显示div的链接。最后一个链接是联系表格。联系表单代码非常杂乱,所以我想从外部加载文件

我发现很多片段只是用jquery将html加载到div中。但问题是我已经有jquery设置来显示和隐藏divs

如何让联系人链接显示联系人div并将外部联系表单加载到其中?

    $(document).ready(function () {
        $('.menu').click(function () {
            var $clicked = $(this)
            $('.menu').each(function(){
                var $menu = $(this);
                if (!$menu.is($clicked))
                {
                    $($menu.attr('data-item')).hide();
                }
            });
            $($clicked.attr('data-item')).toggle();
        });
		$(".contactmenu").click(function(){
        	$("#menu-contact").load("contactform.htm");
    	});
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header>
<div align="center" class="logoclass" id="logo"><img src="media/logo.png"/></div>
<div id="topmenu">
<a href="#" id="home-menu-item" class="menu" data-item="#menu-home">Home</a>
<a href="#" id="videos-menu-item" class="menu" data-item="#menu-videos">Videos</a>
<a href="#" id="follow-menu-item" class="menu" data-item="#menu-follow">Follow</a>
<a href="#" id="contact-menu-item" class="menu" data-item="#menu-contact">Contact</a>
</div>
</header>

<article>
<div id="bodycontent">
<div id="menu-contact" style="display: none">Contact</div>
<div id="menu-follow" style="display: none">Follow</div>
<div id="menu-videos" style="display: none"><br />
<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls>
  <source src="media/videos/splash.mp4" type="video/mp4">
  <source src="media/videos/splash.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>
<div id="menu-home" style="display: none">..</div>
</div>
</article>

1 个答案:

答案 0 :(得分:0)

contactmenu类不存在,请尝试:

$("#contact-menu-item").click(function(){