ページ内リンクを自動で生成する

FAQページなどでよく使われるのですが、ページの上のほうに質問一覧のリンクがあって、クリックすると同一ページ内のアンカーに飛ぶという構成があります。

ユーザーとしてはなんとも思わない普通の構成ですが、制作者としては

・質問のタイトルにIDを振り
・そのIDに飛ぶ質問のみを抜き出したリンクをつくる

という同じ内容(質問の部分)を2度も入力しているのが面倒だと思ってました。

そこで「質問+回答」のセットをつくれば、アンカーリンク部分は自動で生成してくれるというスクリプトを考えました。jQueryを使用しています。

サンプル

AD

HTML

anchor_loadというidの要素に質問一覧を生成します。

javascript

質問(ここではh2)に対して連番でIDを振り、テキストを取得してアンカーリンクに仕立てて指定IDにappendします。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。