質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3921閲覧

【html:jQuery】ボタンでクリック時にメニュ一覧(外部html)を読み込ませたい

asakura

総合スコア29

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/08/01 15:13

編集2017/08/01 15:15

メニュ一覧をメインページとは別のhtmlページとして用意しています、
メインページからメニュ一覧を表示するボタンをクリックしてもメニュが表示されません。

なお、メインページに呼び出し先のメニュー一覧を記述した場合、
想定通りの挙動が出来てます。
(index.htmlのコメントアウトを外して外部ファイルの読み込みを行わないと想定通りの挙動となります)

メニュ内容を外部ファイル化し、メインページから読出し
なおかつ読み込んだメニューページ内のボタン動作をmain.js記述の通り動かすには、
どのように対処したら良いでしょうか。

よろしくお願い致します。


■環境
jqueryのバージョン:jquery-1.12.4.min.js
確認ブラウザ:Chrome 59,0

html

1<!-- 呼び出し元ページ(メインページ:index.html) --> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="css/style.css"> 7 <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script> 8 <script src="js/main.js" type="text/javascript"></script> 9</head> 10 11<body> 12 13 <header> 14 <div class="menu_btn" id="menu_btn"></div> 15 16 </header> 17 18 <!-- <div class="menu_layer" id="menu_layer" style="display: none;"> 19 <div class="menu_popup"> 20 <div class="popup_btn_container"> 21 <div class="popup_btn" id="close_btn">とじる</div> 22 </div> 23 </div> --> 24 25</body> 26 27</html>

html

1<!-- 呼び出しページ(メニューページ:menu.html) --> 2<div class="menu_layer" id="menu_layer"> 3 <div class="menu_popup"> 4 <div class="popup_btn_container"> 5 <div class="popup_btn" id="close_btn">とじる</div> 6 </div> 7 </div>

js

1 // メニューページ呼び出し時の操作:main.js 2 $(function() { 3 // menu.htmlの読み込み 4 $('#menu_layer').load("./menu.html"); 5 6 // メニューのオーバーレイ動作 7 $('#menu_btn').on('click', function() { 8 $('#menu_layer').fadeIn(250); 9 }); 10 11 $('#close_btn').on('click', function() { 12 $('#menu_layer').fadeOut(200); 13 }); 14 15 });

css

1@charset "UTF-8"; 2/* 参考:スタイルシート(style.css) */ 3header .menu_btn { 4 display: block; 5 position: absolute; 6 cursor: pointer; 7 top: 0px; 8 left: 0px; 9 width: 44px; 10 height: 44px; 11 background-image: url("../img/btn_menu.svg"); 12 background-size: 18px 15px; 13 background-position: left 10px top 25px; 14 background-repeat: no-repeat; 15} 16 17.menu_popup { 18 margin-top: 140px; 19 text-align: center; 20 background-color: #fff; 21 padding-bottom: 10px; 22 border-top: 2px solid #f4566d; 23 border-bottom: 2px solid #f4566d; 24} 25 26.menu_popup .popup_btn_container { 27 text-align: center; 28 margin: 20px 0px; 29} 30 31.menu_popup .popup_btn { 32 display: inline-block; 33 width: 140px; 34 height: 24px; 35 line-height: 24px; 36 color: #561219; 37 text-align: center; 38 font-size: 12px; 39 background-color: #f2dadf; 40 border-radius: 12px; 41}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

HTML

1<div class="menu_layer" id="menu_layer" style="display: none;"></div>

をコメントにしてることによって

JavaScript

1$('#menu_layer').load("./menu.html");

この処理時にidがmenu_layerのが無いからロード処理ができない
&onイベントも同様に処理タイミング的にidがないと思われるので

index.html

HTML

1<!doctype html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 6 <link rel="stylesheet" href="main.css" /> 7 <script src="main.js"></script> 8</head> 9<body> 10 <header> 11 <div class="menu_layer" id="menu_layer" style="display: none;"></div> 12 <div class="menu_btn" id="menu_btn"></div> 13 </header> 14</body> 15</html>

menu.html

HTML

1<!-- 呼び出しページ(メニューページ:menu.html) --> 2<div class="menu_popup"> 3 <div class="popup_btn_container"> 4 <div class="popup_btn" id="close_btn">とじる</div> 5 </div> 6</div>

main.js

JavaScript

1// メニューページ呼び出し時の操作:main.js 2$(function() { 3 // menu.htmlの読み込み 4 $('#menu_layer').load("./menu.html", function( response, status, xhr ) { 5 $('#close_btn').on('click', function() { 6 $('#menu_layer').fadeOut(200); 7 }); 8 }); 9 // メニューのオーバーレイ動作 10 $('#menu_btn').on('click', function() { 11 $('#menu_layer').fadeIn(250); 12 }); 13 14}); 15

こんな感じでとりあえず挙動するのは確認しました(cssは同じなので略)

投稿2017/08/01 16:29

編集2017/08/01 16:36
rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asakura

2017/08/02 08:27

ありがとうございます! 思っていた通りの挙動を確認しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問