Как сделать переключение табов без перезагрузки страниц?

Question

[Евгений Карнаухов]

Всем привет, можете помочь сделать переключение табов без перезагрузки страницы, сейчас у меня код таков

//    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();
});

Comments

[Антон Литвиненко]

Табы в своей изначальной природе не перещагружают страницу. Ваш первый кусок кода это делает. Но аяксом, который вы ткнули в тегах тут и не пахнет

[Евгений Карнаухов]

Антон Литвиненко, вот именно можете подсказать мне что-то похожее на аяксе

[FrelFrloich]

Антон Литвиненко, может он подумал что страница подгружаямая аяксом с разными url это табы, вот и получилась каша? Ну это как предположение.

[Надим]

Дай ссылку на страницу с табами, надо для начала посмотреть как там у вас все из коробки устроено, потом уже только смогу предложить решение.

[Евгений Карнаухов]

Надим Закиров, вот страничка https://dev.itlvl.com/nashi-raboty/

[Евгений Карнаухов]

Надим Закиров, А можешь еще подсказать, а как сделать что бы когда переключил таб та ссылка ставала активной, а то сейчас переключаешь, все переключаеться но активная ссылка не пропадает

[Надим]

Евгений Карнаухов, я поправил свой ответ, используй обновленный код.

Answer 1

[Надим]

Вставь на странице с табами такой html-код и будет тебе счастье:

<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>

Comments

[Евгений Карнаухов]

Ураааа ты лучший спасибо))))

[Евгений Карнаухов]

Александр, можно лучше сделать?

[Надим]

Александр, я бы сам никогда так не делал, для динамической загрузки контента надо пилить API на стороне сервера и тянуть данные точечно, а не страницы целиком, но автору вопроса очевидно нужен самой просто способ из всех возможных, поэтому и предложил, что предложил.

[Евгений Карнаухов]

Надим Закиров, а можешь подсказать я подставил все что ты написал на эту страницу https://dev.itlvl.com/otzyvy-nashih-klientov, но там все ламаеться, и можно как-то исправить что бы отмечался активный таб??

[Надим]

Евгений Карнаухов, на странице отзывов у тебя другие селекторы, нужно использовать их на этапе парсинга и вставки контента.

[Евгений Карнаухов]

Надим Закиров, а активность табов как исправить что бы подсвечивался активны, а не активный исщезал?

[Евгений Карнаухов]

Александр, а можете помочь это сделать?

[Надим]

Евгений Карнаухов, я поправил код в своем ответе, используйте обновленный код, чтобы активность табов тоже менялась.

[Евгений Карнаухов]

Надим Закиров, вставил на сайт вообще перестало работать((

[Надим]

Евгений Карнаухов, сейчас посмотрю.

[Надим]

Евгений Карнаухов, у меня опечатка была, добавьте кода заново, я его поправил.

[Евгений Карнаухов]

Надим Закиров, ооо заработало))) Спасибо но с отзывами все равно дичь происходит, вроде поставил все класы как там, но все равно все слетело(((( можешь посмотреть пожалуйста

[Евгений Карнаухов]

Надим Закиров, там как-то стили некоторые уходят хотя вроде все классы поставил

[Надим]

Евгений Карнаухов, вроде у вас все работает, а если там у вас какие-то специфичные проблемы это надо разбирать отдельно, собственно если нужна какая-то доп. помощь заказывайте платную консультацию.