Как загрузить html в скрытый div?

#javascript #jquery #html #load

#javascript #jquery #HTML #загрузить

Вопрос:

У меня есть настройка страницы со ссылками, которые скрывают / показывают разделы. Последняя ссылка — это контактная форма. Контактные формы очень запутаны с кодом, поэтому я хотел загрузить файл извне

Я нашел много фрагментов о простой загрузке html в div с помощью jquery. Но проблема в том, что у меня уже есть настройка 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. Живой сайт shadextracks.com так что вы можете видеть, что я пытаюсь сделать

2. Если вы хотите, чтобы он выполнял несколько действий, поместите туда несколько бит кода. В чем проблема?

3. не имеет значения, скрыто оно или нет

4. Да, как сказал @Nikola, не имеет значения, скрыт ли div, вы все равно можете добавлять в него содержимое. Или есть какая-то особая причина, по которой вы хотите это сделать?

5. shadextracks.com — 403: Запрещено

Ответ №1:

класс contactmenu не существует, попробуйте:

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