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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js