タブ方式のメニュー

タブ方式のメニュー。人の書いたスクリプトを使ってもいいんだが、自分でもやりたくて書いてみた。スクリプトを切った時、タブ部分のメニューが飾りになる、あるいはタブとして機能しないのにデザインがタブのままというスクリプトを見たことがあったため、それの対策ってなんだろうと思ってやってみた。一応タブの自動選択機能まで付けております。

タブ方式1

見出しの文字列を抽出してタブを自動的に生成する。Xは数字に置き換える。1番目なら part1とsbj1、6番目ならpart6とsbj6。スクリプトを無効にすればメニューが出ないけど、タブの文字列を自由に設定できないのが難点。

<div id="partX" class="tab_contents">
<h2 id="sbjX">見出し</h2>
<p>
本文
</p>
</div>

タブ方式2

リスト形式のメニューをスクリプトでタブメニューへと組み替える。スクリプト切ったらタブメニューになりません。タブの文字列を自由に設定できる反面、タブメニューのコードを書く手間は増えた。

<div id="partX" class="tab_contents">
<h2>見出し</h2>
<p>
本文
</p>
</div>

ダウンロード

ファイル一式をダウンロードできるようにしておく。何かこのエントリから発想を得たなら改変なりなんなりして使ってもらっていいし、コードなどの悲惨さを見物するもいいしｗｗｗ

• タブ方式1
• タブ方式2