JSFiddle - React, Tailwind, and code Playground

by this_mong

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="container">
 
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">첫번째</li>
    <li class="tab-link" data-tab="tab-2">두번째</li>
    <li class="tab-link" data-tab="tab-3">세번째</li>
  </ul>
 
  <div class="tab-1 tab-content current">
  첫번째 메뉴의 내용이 들어갑니다
  </div>
  
  <div class="tab-2 tab-content">
  두번째 메뉴의 내용이 들어갑니다
  </div>
  
  <div class="tab-3 tab-content">
세번째 메뉴의 내용이 들어갑니다
   </div>
 
</div>

CSS

ul.tabs{
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li{
  background: none;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}

ul.tabs li.current{
  background: #ededed;
  color: #222;
}

.tab-content{
  display: none;  
  padding: 15px 0;
  border-top:3px solid #eee;
}

.tab-content.current{
  display: inherit;
}

JavaScript

$(document).ready(function(){
   
  $('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');
 
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');
 
    $(this).addClass('current');
    $("."+tab_id).addClass('current');
  })
 
})