tabber.jsライブラリのDL

■JavaScript Tabifier automatically create an html css tabs interface

上記よりtabber.jsをDLして、読み込ませます。
スクリプトは任意の箇所に置いて、パスの指定を行います。

<script type="text/javascript" src="tabber.js"></script>
<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>

タブ式に変換したい箇所の記述例

class=tabber で囲んだ箇所がタブ式コンテンツに変更されます。
class=tabbertab で囲んだ見出し箇所はタブの文字列になります。

<div class="tabber">

<div class="tabbertab">
<h2>タブの文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>

<div class="tabbertab">
<h2>タブの文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>

<!-- tabber end --></div>

<div class="tabber">

<div class="tabbertab" title="タブの文字列">
<h2>文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>

<div class="tabbertab" title="タブの文字列">
<h2>文字列</h2>
<p>コンテンツ部分</p>
<!-- tabbertab end --></div>

<!-- tabber end --></div>

タブで切り替えたコンテンツ内に更にタブを設置する方法もありますが、ここでは一番簡単な方法だけで。
より詳細に試してみたい場合は、配布サイトのTipsを見ながら試してみると良いです。

MTのエントリーをタブ式にしてみる

エントリーとして生成される範囲をtabbertabで括ってあげると良いです。
アイテム(画像)をタブ形式にしてみたり、タグをタブに割り当てて、属するエントリーを表示させたりも出来そうです。

<div class="tabber">
<MTEntries lastn="5">
<div class="tabbertab">

<h2><$MTEntryDate$></h2>
<div class="testtitle"><$MTEntryTitle$></div>

<div class="entry-body">
<$mt:EntryBody$>
<!-- entry-body end --></div>

<!-- tabbertab end --></div>
</MTEntries>
<!-- tabber end --></div>

tabberのcss

tabberライブラリに付属しているcssでは、見出しをdisplay=noneで消してあります。
この箇所を変更すれば、オリジナルでは消えている見出しも表示させる事が可能です。

あとがき

スクリプトを読み込ませて、classを付加するだけなので、もとのHTML(テンプレート)に過度の変更を行わずに導入する事が可能です。
この点がとても良いなぁ、と思って試してみました。
スクリプトをOFFにした場合でもコンテンツが消えない点も○。
ひとつのページで複数のtabber指定を行っても、干渉もなく利用する事が出来ます。

サイトにちょっと変化を持たせてみたい方や、興味の湧いた方はちょっと試してみるといかがでしょうか？
(｢･ω･)｢