<div class="tab_nav">
    <a  href="#" class="tab_link" data-tablink="1">Tab#1</a>
    <a  href="#" class="tab_link" data-tablink="2">Tab#2</a>
    <a  href="#" class="tab_link" data-tablink="3">Tab#3</a>
</div>
<div class="tab_block">
    <div class="tab" data-tab="1">Content#1</div>
    <div class="tab" data-tab="2">Content#2</div>
    <div class="tab" data-tab="3">Content#3</div>
</div>
<div class="nav_block">
    <a href="#" class="prev">prev</a>
    <a href="#" class="next">next</a>
</div>

.d-none{
  display: none;
}
.tab{
  display: none;
}
.tab.selected{
   display: block; 
}

$(document).ready(function(){
    $('.tab:first').addClass('selected');
    $('.tab_nav a').click(function(e){
      e.preventDefault();  
      $('.tab').removeClass('selected');
      $('.tab[data-tab="'+$(this).data('tablink')+'"]').addClass('selected');
    });   
    $('.nav_block a').click(function(e){
        e.preventDefault();   
        let this_selected_tab = $('.tab.selected');
        if($(this).hasClass('prev')){
          if(this_selected_tab.prev('.tab').length > 0){
            this_selected_tab.prev('.tab').addClass('selected');    
          }else{
            $('.tab:last').addClass('selected');
          }       
        }
        if($(this).hasClass('next')){
          if(this_selected_tab.next('.tab').length > 0){
            this_selected_tab.next('.tab').addClass('selected');     
          }else{
            $('.tab:first').addClass('selected');
          }
        }
      this_selected_tab.removeClass('selected');
    });
});