<div id="tab">
    <nav>
        <a href="#" class="active" data-id='1'>Tab 1</a>
        <a href="#" data-id='2'>Tab 2</a>
        <a href="#" data-id='3'>Tab 3</a>
    </nav>

    <div class="tab-content active" data-content='1'>
        Isi Tab 1
    </div>
    <div class="tab-content" data-content='2'>
        Isi Tab 2
    </div>
    <div class="tab-content" data-content='3'>
        Isi Tab 3
    </div>
</div>

#tab nav {
  display: flex;
}

#tab nav a {
  color: black;
  text-decoration: none;
  padding: 0.5rem;
  border: 1px solid silver;
}

#tab nav .active {
  background: lightgreen;
}

.tab-content {
  display: none;
  
  border: 1px solid silver;
  padding: 1rem;
}

.tab-content.active {
    display: block;
}

$("#tab nav a").click(function(){
  const id = $(this).data('id');
  if(!$(this).hasClass('active')){
    $("#tab nav a").removeClass('active');
    $(this).addClass('active');
    
    $('.tab-content').hide();
    $(`[data-content=${id}]`).fadeIn();
  }
});