2016-10-10 10 views
0

divを表示/非表示にするリンクが設定されています。最後のリンクは連絡フォームです。連絡先フォームは非常にコードが厄介なので、ファイルを外部にロードしたいと思った。htmlをhidden divにロードするには?

jQueryでdivにhtmlをロードするだけで多くのスニペットが見つかった。しかし、問題は私がdivを表示して非表示にするためのjqueryセットアップを既に持っていることです

連絡先の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(); 
 
     }); 
 
\t \t $(".contactmenu").click(function(){ 
 
     \t $("#menu-contact").load("contactform.htm"); 
 
    \t }); 
 
    });
<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>

+0

ライブサイトはhttp://shadextracks.comある –

+0

複数のことをしたい場合は、そこに複数のコードを入れてください。何が問題ですか? – musefan

+0

それは問題ではありません、それは隠されているかどうかです。 –

答えて

0

contactmenuクラスがしようと、存在しません:あなたは私が何をしようとしていますかを見ることができるように

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

私は方法をテストしていたときを忘れていました。私はそれを試みましたが、divの内容のテキストしか表示しません。それはhtml形式では読み込まれません。 –

関連する問題