0

ページの目次として機能する html の「詳細」要素があります。TOC の現在「アクティブな」要素 (a class="active") に基づいて、ドキュメントの HTML の「タイトル」タグを動的に書き換えようとしています。

ただし、コンソールでは機能しますが、実際にページのフッターに埋め込むと、コンソール エラーが発生します。

Uncaught ReferenceError: jQuery が定義されていません

このインライン スクリプトの直前に、ページのフッターに jQuery を含めています。ページ上の他の jquery 要素は正常に動作しています。このスクリプトの問題点は何ですか?

<script>
    jQuery(document).ready(function(){
        var title = jQuery('.myEl').find('a.active').text();
        jQuery('title').text(title);
    });
</script>

このページの HTML は次のようになります。

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Customer Testimonials (Page 3)</title>
<link rel="stylesheet" href="styles.css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>

    <details class="myEl" open="open"><summary>In this article</summary>
        <ol>
            <li><a href="mypage/">Introduction</a></li>
            <li><a href="mypage/2/" class="active">Title for the second page</a></li>
            <li><a href="mypage/3/">Title for the third page</a></li>
        </ol>
    </details>

    <script type='text/javascript' src='scripts.jquery.js' async='async'></script>
    <script>
    jQuery(document).ready(function(){
        var title = jQuery('.myEl').find('a.active').text();
        jQuery('title').text(title);
    });
    </script>
</body>
</html>
4

1 に答える 1