Jqueryで超シンプルタブ
Jqueryでタブの切り替えをすることってけっこうありますよね。余計なプラグインは一切使わず、サクっとJqueryだけでタブの切り替えを書いてみました。私はタブの切り替えはいつもこんな感じでシンプルに書いています。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(´#tab-2,#tab-3,#tab-4,#tab-5´).css(´visibility´,´hidden´);
$(´#mainMenu .menu01´).click(function(){
$(´#tab-2,#tab-3,#tab-4,#tab-5´).css(´visibility´,´hidden´);
$(´#tab-1´).css(´visibility´,´visible´);
$(´#mainMenu a´).removeClass(´active´);
$(´#mainMenu .menu01 a´).addClass(´active´);
});
$(´#mainMenu .menu02´).click(function(){
$(´#tab-1,#tab-3,#tab-4,#tab-5´).css(´visibility´,´hidden´);
$(´#tab-2´).css(´visibility´,´visible´);
$(´#mainMenu a´).removeClass(´active´);
$(´#mainMenu .menu02 a´).addClass(´active´);
});
$(´#mainMenu .menu03´).click(function(){
$(´#tab-1,#tab-2,#tab-4,#tab-5´).css(´visibility´,´hidden´);
$(´#tab-3´).css(´visibility´,´visible´);
$(´#mainMenu a´).removeClass(´active´);
$(´#mainMenu .menu03 a´).addClass(´active´);
});
$(´#mainMenu .menu04´).click(function(){
$(´#tab-1,#tab-2,#tab-3,#tab-5´).css(´visibility´,´hidden´);
$(´#tab-4´).css(´visibility´,´visible´);
$(´#mainMenu a´).removeClass(´active´);
$(´#mainMenu .menu04 a´).addClass(´active´);
});
});
</script>
<ul id="mainMenu">
<li class="menu01"><a class="active" href="#">タブ1</a></li>
<li class="menu02"><a href="#">タブ2</a></li>
<li class="menu03"><a href="#">タブ3</a></li>
<li class="menu04"><a href="#">タブ4</a></li>
<li class="menu05"><a href="#">タブ5</a></li>
</ul>
<div id="tab-1">
tab-1の内容を表示します
</div>
<div id="tab-2">
tab-2の内容を表示します
</div>
<div id="tab-3">
tab-3の内容を表示します
</div>
<div id="tab-4">
tab-4の内容を表示します
</div>
<div id="tab-5">
tab-5の内容を表示します
</div>
すんません、これだけです。
とりあえず、クリックしたリンクはclass=”active”は最低限あてるようにしました。全主要ブラウザで動作チェック済みです。
余計なエフェクトは一切ないですが、シンプルにタブの切り替えを行いたいときに、どうぞ！