Insecure -Project IE-

Javascript + CSS でタブ切り替え UI を実装します。

トップページアプリケーション > Javascript + CSS でタブ切り替え UI を実装する

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 に読み込むだけです。

JS と CSS