Q&A
これだと2重にjQueryをロードすることになるような気が
アクティブなページにアンダーラインをつけたい。
ファイル構成
実現したいイメージ（ホーム画面）
実現したいイメージ（CONTENTS1画面）
質問: includeしたHTMLに親ページからjQueryを効かせれば実現可能
以下のように書いてみましたが、失敗しています。
どのようにすれば親に書いたjQueryがincludeしたHTMLに
効くでしょうか？
書いたコード
HTML(index.html)
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>外部HTML操作 │ HOME</title> 8 <link rel="stylesheet" href="/style.css"> 9</head> 10<body> 11 <header></header> 12 <main> 13 <p>コンテンツ</p> 14 </main> 15 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 16 <script src="include.js"></script> 17 <script> 18 $('.link1').addClass('stay'); 19 </script> 20</body> 21</html>
HTML(contents1.html)
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>外部HTML操作 │ CONTENTS1</title> 8 <link rel="stylesheet" href="/style.css"> 9</head> 10<body> 11 <header></header> 12 <main> 13 <p>コンテンツ1</p> 14 </main> 15 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 16 <script src="include.js"></script> 17 <script> 18 $('.link2').addClass('stay'); 19 </script> 20</body> 21</html>
HTML(contents2.html)
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>外部HTML操作 │ CONTENTS2</title> 8 <link rel="stylesheet" href="/style.css"> 9</head> 10<body> 11 <header></header> 12 <main> 13 <p>コンテンツ2</p> 14 </main> 15 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 16 <script src="include.js"></script> 17 <script> 18 $('.link3').addClass('stay'); 19 </script> 20</body> 21</html> 22
HTML(contents3.html)
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>外部HTML操作 │ CONTENTS3</title> 8 <link rel="stylesheet" href="/style.css"> 9</head> 10<body> 11 <header></header> 12 <main> 13 <p>コンテンツ3</p> 14 </main> 15 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 16 <script src="include.js"></script> 17 <script> 18 $('.link4').addClass('stay'); 19 </script> 20</body> 21</html> 22
HTML(header.html)
1<nav> 2 <ul> 3 <li><a class="link1" href="/">HOME</a></li> 4 <li><a class="link2" href="contents1.html">CONTENTS1</a></li> 5 <li><a class="link3" href="contents2.html">CONTENTS2</a></li> 6 <li><a class="link4" href="contents3.html">CONTENTS3</a></li> 7 </ul> 8</nav> 9 10<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 11<script> 12 $('a').hover(function(){ 13 $(this).addClass('active'); 14 }, 15 function() { 16 $(this).removeClass('active'); 17 }); 18</script>
JQuery
1$(function(){ 2 $('header').load("/header.html"); 3})
「includeしたHTML」とは、include.js というコードで何かをやっている、という理解で合っていますか？
include.js の中身は一番最後に書かれているコードでいいでしょうか？
>「includeしたHTML」とは、include.js というコードで何かをやっている、という理解で合っていますか？
>include.js の中身は一番最後に書かれているコードでいいでしょうか？
はい、「include.js」の中身が
```jQuery( include.js )
$(function(){
$('header').load("/header.html");
})
```
です。
ヘッダーを呼び出しています。
回答1件
0
load()はAjaxなので、非同期処理です。
ですので、$('.link1').addClass('stay');などは、headerの内容が読み込まれる前に処理されます。なので、.link1が存在しない時に実行されています。
読み込みが終わるのを待って実行してみてはどうですか？
js
1$(function () { 2 $('header').load("/header.html").promise().done(callback); 3})
として、
js
1 function callback() { 2 $('.link1').addClass('stay'); 3 }
などとするといいかもしれません。
投稿2022/07/06 01:40
総合スコア36134
試してみたのですがうまくいきません。
そうでしたか。当方では上手くいきましたので、ご提示いただいていない部分に原因があるかもしれません。
あなたの回答
tips
プレビュー
