Переключение между вкладками с обновлением странички
Реализовал вкладки на странице при помощи плагина Shortcodes Ultimate
При загрузке страницы теперь, соответственно, сразу грузится всё содержимое всех вкладок. Как сделать так, чтобы грузилось только содержимое той вкладки, на которую нажали, а при переходе на другую вкладку, страница бы обновлялась с загрузкой контента той вкладки, на которую нажали?
Shortcode выглядит так:
[su_tabs style="default" active="1" vertical="no" mobile="stack" anchor_in_url="no" class=""] [su_tab title="Имя вкладки" disabled="no" anchor="" url="" target="blank" class=""]Содержимое вкладки[/su_tab] [su_tab title="Имя вкладки" disabled="no" anchor="" url="" target="blank" class=""]Содержимое вкладки[/su_tab] [su_tab title="Имя вкладки" disabled="no" anchor="" url="" target="blank" class=""]Содержимое вкладки[/su_tab] [/su_tabs]
Полагаю, что нужно прописать какой-либо класс, но не знаю как это реализовать. Пробовал добавить в URL такую штуку ?jquery=string#anchor, но в этом случае обновление страницы зацикливается, что логично, к тому же это не решает первой части вопроса (загрузка только контента определенной вкладки).
Можете подсказать решение?
PS Очень слабо знаком с jquery, поэтому, если можно, то в деталях. Куда именно и что нужно добавить.
Спасибо!
Очевидное решение - получение содержимого вкладки ajax-запросом, потому что перезагрузка всей страницы при каждой смене вкладки это неуважение к посетителю.
Это точно. только вот как такую подгрузку реализовать???
Сначала почитать статью Тимура про базовые знания для создания Ajax-запроса на фронтэнде WordPress https://wp-kama.ru/id_2018/ajax-v-wordpress.html (см. "Пример AJAX кода для фронт энда", там понятно, что и куда)
затем разместить между тегами шорткода div с необходимыми данными о подгружаемой вкладе (с помощью data-атрибутов в теге div можно передать что угодно, например, ID погружаемой записи)
потом на переключатель вкладки повесить обработчик события click, функция которого будет создавать, отправлять, получать и обрабатывать Ajax-запрос)