Какие сущетсвуют способы переключения/загрузки вкладок на сайте?
Здравствуйте.
Есть 1 страница сайта и на ней 4 вкладки (первая из них по умолчанию активна). В каждой вкладке небольшие изменения страницы в css и html + отдельный js функционал. Есть основной js скрипт, который должен взаимодействовать со всеми вкладками, которые будут открыты. Сейчас я выбираю наиболее производительный способ переключения (и загрузки) между ними. Он должен соответствовать требованиям:
1) Не изменять URL страницы (якоря). 2) Неактивные вкладки не должны заранее загружаться (ни js, ни html, ни css). 3) Не обновлять страницу при переключении. Цель: максимальная первоначальная скорость загрузки страницы без потери функционала. Неважно сколько всего будет подгружаться после полной загрузки стартовой страницы. Главное, чтобы это было без её обновления и изменения URL.
В голову приходят "извращённые" способы: 1) При нажатии на вкладку - загружать и запускать отдельный js файл со скриптом, из основного файла. Этот отдельный файл будет добавлять/заменять текущий css и html на необходимый + добавлять свой, отдельный функционал в основной скрипт. 2) При нажатии на вкладку подгружать через ajax отдельный файл скрипта. Этот отдельный файл будет добавлять/заменять текущий css и html на необходимый + добавлять свой, отдельный функционал в основной скрипт.
Не знаю возможно ли это вообще.
Какие существуют способы переключения/загрузки вкладок на сайте?
1) CSS якоря.
2) Jquery + ajax.
3) ...
Если используете bootstrap, то вполне достаточно его табов -https://getbootstrap.com/docs/3.3/javascript/#tabs
Либо любой jQuery плагин для табов.
У них есть события, например ловить событие перед открытием вкладки, отправлять ajax запрос и ответ подставлять в вкладку
Средний