マウスオーバーでもタブメニューを開閉できるJavaScript「SkiyoTabs」

タブはITリテラシーの低いユーザーにとって、ただの飾りに見えることもあるようです。
こういう視点から見ると、タブメニューはクリック時だけでなく、マウスオーバー時にも切り替わるとよいのかもしれません。
SkiyoTabsは簡単にマウスオーバーも可能にしてくれるJavaScriptです。

sponsors

使用方法

SkiyoTabsからjquery.skiyotabs.jsをjQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.skiyotabs.js"></script>
<script>
$(function(){
	$('#id名').SkiyoTabs({
			className:'select',  //選択されているときのclassです。
			eventName:'mouseover' //イベント処理(clickでクリック時になります)
	});
});
</script>
あとはタブ部分を記述します。

<div id="id名">
  <ul>
    <li><a href="#tab1">タブ1</a></li>
    <li><a href="#tab2">タブ2</a></li>
    <li><a href="#tab3">タブ3</a></li>
  </ul>
  <div id="tab1" class="tabmain">コンテンツ1</div>
  <div id="tab2" class="tabmain">コンテンツ2</div>
  <div id="tab3" class="tabmain">コンテンツ3</div>
</div>
上記のようにタブで指定したhrefとコンテンツのid名を一緒にしてください。
あとはCSSで微調整を行えば完成です。
例)

ul {list-style:none;}
ul li {	float: left;}
ul li.select {background-color:#000;}
.tabmain {width:500px;height:100px;clear:both;}

サンプル

コンテンツ1
コンテンツ2
コンテンツ3

sponsors

Javascriptサンプルページ一覧
skuare.net