否 Ajax タブインターフェース for jQuery

デモ

否 Ajax タブインターフェースの仕様

HTML に記述された情報をタブインターフェースで切り替える

JavaScript が実行されない場合は全て表示され、タブはアンカーリンクになる

HTML

<ul id="tab-nav"> <li><a href="#tab-resource0" class="on">tab0</a></li> <li><a href="#tab-resource1">tab1</a></li> <li><a href="#tab-resource2">tab2</a></li> <li><a href="#tab-resource3">tab3</a></li> </ul> <div id="tab-resource"> <div id="tab-resource0" class="tab-sec"> contents </div> <div id="tab-resource1" class="tab-sec"> contents </div> <div id="tab-resource2" class="tab-sec"> contents </div> <div id="tab-resource3" class="tab-sec"> contents </div> </div>

JavaScript

実装にはJQueryが必要です。

var tabui = function(){ $("#tab-resource .tab-sec:gt(0)").fadeOut(); $("#tab-nav li a").click(function(){ var id = $(this).attr("href"); $("#tab-resource > .tab-sec").css('display','none'); $(id).fadeIn('first'); $("#tab-resource > .tab-sec").not(id).css('display','none'); $('#tab-nav li a').removeClass('on'); $(this).addClass('on'); return false; }); }