Javascript + CSS でタブ切り替え UI を実装する。
ページ内リンクを貼っているページでページの縦幅が長くなり、スクロール量が増えて困るのでタブで切り替えようというものです。
使い方
まず、ul は id="pageTab" になっていて、ページ内リンク(例:<a href="#box1">)になっているリストと、タブに連動するコンテンツは(この JS の仕様上)id が割り当てられている div で囲まれている必要があります。
さらに、それらの
div はすべて div id="pagepartition" で囲う必要があります。
ソースは以下のような感じです。
<ul id="pageTab">
<li><a href="#box1">タブ1</a></li>
<li><a href="#box2">タブ2</a></li>
</ul>
<div id="pagepartition">
<div id="box1">コンテンツ1</div>
<div id="box2">コンテンツ2</div>
</div>
あとは JS ファイルをタブ切り替え UI を実装したい HTML に読み込むだけです。