
jQueryだけでつくるシンプルタブ
2013年3月31日jQueryのみでつくるギミック
画面遷移させず要素をシンプルにタブで切り替える仕組みをjQueryだけでつくります。
JavaScript
(function($){ $(function() { $('.tabSection .content:not(:first)').hide(); $('.tabSection .tab li').click(function() { $('.tabSection .tab li').removeClass('current'); $(this).addClass('current'); $('.tabSection .content').hide(); var select = $(this).find('a').attr('href'); $(select).show(); return false; }); }); })(jQuery);
HTML
<div class="tabSection"> <ul class="tab"> <li class="current"><a href="#tab01">tab01</a></li> <li><a href="#tab02">tab02</a></li> <li><a href="#tab03">tab03</a></li> </ul> <div id="tab01" class="content"> <p>tab01 content</p> </div> <div id="tab02" class="content"> <p>tab02 content</p> </div> <div id="tab03" class="content"> <p>tab03 content</p> </div> </div>