目次を作りたい!jsを使わず、項目にfocusさせる方法。

  jsを使わずfocusさせる方法

よくいろんなサイトのブログを見ていると目次をみかけることがあると思います。目次をさらっと見て

読みたい項目をクリックすると…

その記事に飛ぶというもの。Jsでfocusを使っていると思っていたんですが、簡単にHTMLとCSSさえしっていれば実装できるんですね。ここ最近知って感動した事実。。

DEMO

この入力フォームは、4文字打ち込むと次のinputボックスにフォーカスするという感じに作っています。これをコードで実装しようとすると…

HTML

CSS

Javascript

ちょっと大変なのがわかるかと思います。

今回は、Jsを使わずこの目次を作成していきます。コードはたったの2行。

<a href=”#id”> 飛び先を指定。</a>

<div id=”id”> idと目次がリンク。 </div>

この2点だけでした…

実際にこれを活用して作ったページが以下になります。

I make English dictionary

英語を勉強しようと思っているので、英語のページを…

上記はDEMO動画となります。

なんか簡単に目次って作成できるんだと感じたものの、枠とかCSSで作るとこだわり始めたりしてきりないから…あまり作りたくないとこです。。

いかがでしたか?簡単に実装できるので、ぜひためしてみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です