gooodmark

goodなWebサイトを厳選ブックマーク!デザインやディレクションの参考にどうぞ。

516bookmark

プラグインなしでタブをつくる

html
<ul class="tabnav">
<li class="select">1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="tabcont">
<li>1</li>
<li class="hide">2</li>
<li class="hide">3</li>
</ul>
css
ul.tabnav li{display:inline-block;background:#ccc;cursor:pointer}
ul.tabnav li.select{background:#999;}
ul.tabcont li{padding:20px;background:#FFF}
ul.tabcont li.hide{display:none}
js
$(function() {
  $('.tabnav li').click(function() {
   var index = $('.tabnav li').index(this);
   $('.tabcont li').css('display','none');
   $('.tabcont li').eq(index).css('display','block');
   $('.tabnav li').removeClass('select');
   $(this).addClass('select')
  });
});