<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="tab-box-1">
  <div class="head">
    <ul class="flex">
      <li class="active" data-tab-name="box-1" data-tab-head-item-name="1"><a>아이템1</a></li>
      <li data-tab-name="box-1" data-tab-head-item-name="2"><a>아이템2</a></li>
      <li data-tab-name="box-1" data-tab-head-item-name="3"><a>아이템3</a></li>
    </ul>
  </div>
  <div class="body">
    <ul>
      <li class="active" data-tab-name="box-1" data-tab-body-item-name="1">내용1</li>
      <li data-tab-name="box-1" data-tab-body-item-name="2">내용2</li>
      <li data-tab-name="box-1" data-tab-body-item-name="3">내용3</li>
    </ul>
  </div>
</div>
<div class="tab-box-1">
  <div class="head">
    <ul class="flex">
      <li data-tab-name="box-2" data-tab-head-item-name="1"><a>아이템1</a></li>
      <li data-tab-name="box-2" data-tab-head-item-name="2"><a>아이템2</a></li>
      <li class="active" data-tab-name="box-2" data-tab-head-item-name="3"><a>아이템3</a></li>
    </ul>
  </div>
  <div class="body">
    <ul>
      <li data-tab-name="box-2" data-tab-body-item-name="1">내용1</li>
      <li data-tab-name="box-2" data-tab-body-item-name="2">내용2</li>
      <li class="active" data-tab-name="box-2" data-tab-body-item-name="3">내용3</li>
    </ul>
  </div>
</div>
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}
.flex {
  display:flex;
}
.tab-box-1 {
  border:10px solid red;
  display:inline-block;
}

.tab-box-1 > .head > ul > li.active {
  color:red;
}
.tab-box-1 > .body > ul > li {
  display:none;
}
.tab-box-1 > .body > ul > li.active {
  display:block;
}
console.clear();

function TabBox__init() {
  $('[data-tab-head-item-name]').click(function() {
    var $this = $(this);
    var tabName = $this.attr('data-tab-name');
    var itemName = $this.attr('data-tab-head-item-name');
    // [for]
    // 모든 것을 숨기고
    $('[data-tab-name="' + tabName + '"]').removeClass('active');
    
    $('[data-tab-name="' + tabName + '"][data-tab-head-item-name="' + itemName + '"]').addClass('active');
    $('[data-tab-name="' + tabName + '"][data-tab-body-item-name="' + itemName + '"]').addClass('active');
  });
}

TabBox__init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.