WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Получай пассивный доход от сайта с помощью браузерных PUSH уведомлений

Переключение между вкладками с обновлением странички

Реализовал вкладки на странице при помощи плагина 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, поэтому, если можно, то в деталях. Куда именно и что нужно добавить.

Спасибо!

0
svasva
месяц назад
  • 0
    Andrew378 america-xix.ru

    Очевидное решение - получение содержимого вкладки ajax-запросом, потому что перезагрузка всей страницы при каждой смене вкладки это неуважение к посетителю. smile

    svasva месяц назад

    Это точно. только вот как такую подгрузку реализовать???

    Andrew месяц назад

    Сначала почитать статью Тимура про базовые знания для создания Ajax-запроса на фронтэнде WordPress https://wp-kama.ru/id_2018/ajax-v-wordpress.html (см. "Пример AJAX кода для фронт энда", там понятно, что и куда)

    затем разместить между тегами шорткода div с необходимыми данными о подгружаемой вкладе (с помощью data-атрибутов в теге div можно передать что угодно, например, ID погружаемой записи)

    потом на переключатель вкладки повесить обработчик события click, функция которого будет создавать, отправлять, получать и обрабатывать Ajax-запрос)

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация