gooodmark

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

545bookmark

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

2015.08.11

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')
  });
});