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

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

使用方法
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;}

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

sponsors

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

記事作成:
記事URL:

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