How to switch tabs without reloading pages?

Question

AJAX

Hello everyone, can you help me switch tabs without reloading the page, now I have the following code

//    Sort Form
    $('.js-submit-form').on('change', function () {
        $('#grid-posts-block').submit();
    });

});
$(function () {
  $('.tab-content:not(:first)').hide();
   $('#tabs-nav a').bind('click', function (e) {
    e.preventDefault();
    $this = $(this);
    $target = $(this.hash);
    $('#tabs-nav a.current').removeClass('current');
    $('.tab-content:visible').fadeOut("slow", function () {
        $this.addClass('current');
        $target.fadeIn("slow");
    });
  }).filter(':first').click();
});

Answer 1

Paste this html code on the page with tabs and you will be happy:

<script>
$(function() {
  
  // Ссылка на форму которую надо грузить без перезагрузки страницы:
  var form = $('form[action="https://dev.itlvl.com/nashi-raboty/"]');
  
  // Вешаем на поля формы обработчик кликов:
  
  form.find('input[type="radio"]').click(async function(e) {
    
    e.preventDefault(); // Предотвращаем клик
    form.css('pointer-events', 'none'); // Блокрируем повторные клики
    
    // Формируем ссылку на страницу которая содержит данные кликнутого таба:
    var link = 'https://dev.itlvl.com/nashi-raboty/?' + $(this).attr('name') + '=' + $(this).val();
    
    var request = $.ajax(link); // Запускаем процесс загрузкки этой страницы
    
    // Пока грузится, делаем плавное исчезновение текущего таба:
    await $('.grid-listing').animate({ opacity: 0 }, 500).promise();
    
    // Получаем те данные что загрузили и меняем URL в браузере:
    var html = await request; history.pushState(null, null, link);
    
    // Удаляем атрибут активности со всех полей:
    form.find('input[type="radio"]').removeAttr('checked');
    
    $(this).attr('checked', 'checked'); // Делаем активным текущий таб
    
    // Вставляем данные с нового таба на текущую страницу:
    
    var doc = new DOMParser().parseFromString(html, 'text/html');
    
    var html = $('.grid-listing', doc).html();
    $('.grid-listing').html(html);
    
    var html = $('.listing-page__pagination', doc).html();
    $('.listing-page__pagination').html(html);
    
    // Делаем плавное появление для вставленного контента:
    await $('.grid-listing').animate({ opacity: 1 }, 500).promise();
    
    form.css('pointer-events', ''); // Снимаем блокировку кликов
    
  });
  
});
</script>