简体   繁体   中英

How to load html into hidden div?

I have a page setup with links that hide/show divs. The last link is a contact form. Contact forms are super messy with code so I wanted to load the file externally

I found many snippets on simply loading html into div with jquery. But the issue is I already have jquery setup to show and hide the divs

How can I have the contact link show the contact div and also load the external contact form into it?

  $(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> 

contactmenu类不存在,请尝试:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM