ブログページによく設置されている目次を作りたい。
ブログの目次とは、こちらの記事のサイドバーのような目次です。
具体的な実装方針は、以下二つです。
①本分から目次を動的に出力すること。
②スクロール位置に合わせて目次のハイライト位置を変えること。
今回は①の本分から目次を動的に出力する。までを解説します。
※目次機能の続きは下記でまとめてます。
目次を作ろう② ハイライト機能
目次を作ろう③ 自動スクロール
本分から目次を生成する。
まずはファーストステップとして、本文から目次を作ります。
左側の本文を、右側の目次の枠に表示させます。
See the Pen 目次0 by YT (@YT-the-scripter) on CodePen.
h2とh3タグのみを引っ張ってくるようJavaScriptを実装するとこんな感じになる。
See the Pen 目次機能 by YT (@YT-the-scripter) on CodePen.
h2とh3タグのみ取得できてることがわかります。
以下コードの解説です。
①まずは 本文全てを変数$contentsに、目次を作成する場所を$outlineに格納します。
const $contents = $(".blog-article");
const $outline = $(".outline__list");②次に本文の中から、h2とh3の要素だけを探します。
.find()で指定した要素だけの時に、処理が動きます。
titleの中には、それぞれのタイトルが入ります。
$contents.find("h2, h3").each(function (index) {
const $element = $(this);
const title = $element.text();
}③次にli要素を作成し、ulタグの直下に配置します
$li.append($a)でli要素の下に、aタグを配置します。
$a.text(title)でaタグの直下に、タイトルを配置します。
$outlline.append($li)で、outlineの直下にliタグを配置します。
const $li = $("<li></li>");
const $a = $("<a></a>");
// リストアイテムにリンクを追加
$li.append($a);
$a.text(title);
$outline.append($li);
最終的には下記のように整形されたliタグが配置されます。
<ul class="outline__list">
<li>
<a>h2タイトル</a>
</li>
<li>
<a>h3タイトル</a>
</li>
<li>
<a>h2タイトル</a>
</li>
</ul>以上で目次の表示は完了です。
まとめ
今回はjQueryで目次を動的に作成する方法についてまとめました。
次回の記事では、スクロール位置に合わせて目次をハイライトする機能を解説します。
——
バックナンバーはこちら。
目次を作ろう② ハイライト機能
目次を作ろう③ 自動スクロール
第二回目では、目次をハイライトする機能について。
今回は目次を自動スクロールする方法についてまとめました。
この記事が誰かの役に立てば幸いです。
以下のXより質問などあれば受け付けているので、ご連絡ください。
コメント