<ul class="tab">
<li class="tab-list">
<a class="on" href="#">button1</a>
</li>
<li class="tab-list">
<a href="#">button2</a>
</li>
<li class="tab-list">
<a href="#">button3</a>
</li>
</ul>
<div>
<div class="tab-content">
첫번째 탭의 내용
</div>
<div class="tab-content" style="display:none">
두번째 탭의 내용
</div>
<div class="tab-content" style="display:none">
세번째 탭의 내용
</div>
</div>
ul{padding-left:0}
li{list-style:none; display:inline-block}
a{text-decoration:none; color:#222; display:block; border:1px solid #222; padding:10px;}
a.on{color:red}
$(function(){
$('.tab a').on('click', function(){
$('.tab-content').hide();
$('.tab-content').eq($(this.parentNode).index()).show();
$('.tab a').removeClass();
$(this).addClass('on');
return false;
});
})
This Pen doesn't use any external CSS resources.