gooodmark

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