Как сделать чтобы вкладка сайта всегда была активной?
Создаем один проект, в котором есть чат личных сообщений свой внутренний мессенджер.. Пока вкладка сайта активна человек получает звуковое уведомление на сайте о новых сообщения и т.д. Но через некоторое время вкладка сайта престает быть активной и соответственно пропадаю уведомления. Надо сделать что бы она была всегда активно и человек получал уведомление как в том же вк.
Используем Vue.js php
- Вопрос задан более года назад
- 304 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Владимир Юрченков @EPIDEMIASH
Человек швейцарский нож
Ну что-то вроде, если с передачей параметра tab в url. в head
function setActiveTab(tabId) < localStorage.setItem("activeTab", tabId); >function getActiveTab() Для вкладки нужно создать компонент
В самом приложении Vue.js добавить код на странице с вкладками. типо
Ну и в PHP где идет генерация заголовка вкладки, добавить:
else < echo $tabs["tab-1"]["title"]; // по умолчанию активна первая вкладка >?> То есть юзаем localStorage, чтобы сохранить id активной вкладки между сеансами. Чтобы на сервере еще это хранить, нужно будет подрубить сессию для выбранной вкладки.
Как сделать чтобы активной была та вкладка (таб), на которую нажали перед обновлением страницы?
При нажатии на ссылку страница обновляется, открывается то что мне надо, НО сразу же 1 вкладка становится активной. Как сделать чтобы активной была та вкладка, на которую нажали или посоветуйте другой пример.
- Вопрос задан более трёх лет назад
- 661 просмотр
3 комментария
Простой 3 комментария
Открывайте страницу по хэшу (#tab-1), затем в коде проверяйте текущий хэш, если есть, и открывайте нужный таб.
Как создать вкладки на JavaScript
Вкладки, также известные как табы, являются распространенным элементом интерфейса веб-страниц. Они позволяют пользователю переключаться между различными разделами контента на одной странице, что повышает удобство использования сайта.
Рассмотрим самый простой способ создания вкладок на JavaScript, который заключается использовании data-атрибутов. Мы создадим HTML разметку, которая будет состоять из блока с навигацией по вкладкам и блоком с вкладками. Вкладкам мы задаем id с названием данной вкладки. Затем мы добавим data-атрибут data-tab к кнопкам со значением id вкладки, к которой они относятся. Далее при клике на кнопку мы будем добавлять класс _active нажатой кнопке и соответствующей вкладке.
Навигация по табам не обязательно должна быть кнопками, в зависимости от вашего проекта, это могу быть например карточки или тому подобное.
Контент 1 Контент 2 Контент 3 Контент 4 В CSS скрываем вкладки с контентом у которых нет класса _active
.tabs__item:not(._active)
И пишем JavaScript:
// получаем все кнопки навигации const tabsButtons = document.querySelectorAll('.tabs__button'); // Проходимся по всем кнопкам tabsButtons.forEach(btn => < // вешаем на каждую кнопку обработчик события клик btn.addEventListener('click', () => < // Получаем предыдущую активную кнопку const prevActiveItem = document.querySelector('.tabs__item._active'); // Получаем предыдущую активную вкладку const prevActiveButton = document.querySelector('.tabs__button._active'); // Проверяем есть или нет предыдущая активная кнопка if (prevActiveButton) < //Удаляем класс _active у предыдущей кнопки если она есть prevActiveButton.classList.remove('_active'); >// Проверяем есть или нет предыдущая активная вкладка if (prevActiveItem) < // Удаляем класс _active у предыдущей вкладки если она есть prevActiveItem.classList.remove('_active'); >// получаем id новой активной вкладки, который мы перем из атрибута data-tab у кнопки const nextActiveItemId = `#$`; // получаем новую активную вкладку по id const nextActiveItem = document.querySelector(nextActiveItemId); // добавляем класс _active кнопке на которую нажали btn.classList.add('_active'); // добавляем класс _active новой выбранной вкладке nextActiveItem.classList.add('_active'); >); >)Если необходимо чтобы первая вкладка была сразу активна, то просто добавьте в разметке класс _active необходимой кнопке и вкладке.
Теперь вы знаете как сделать табы на чистом JavaScript. Остается дело за малым, стилизовать вкладки под свой проект.
Изменение активной вкладки при открытом рабочем процессе.
В Configuration Manager можно изменить вкладку, которая появляется по умолчанию при открытии рабочего процесса в окне помощника по задачам. Эти вкладки отображаются внизу окна помощника по задачам. Например, при проектировании рабочего процесса помощника по задачам может быть очень полезно сделать вкладку «Конструктор» активной по умолчанию вместо вкладки «Справка»
-
Нажмите Пуск > Task Assistant Manager > Менеджер конфигурации .
Откроется диалоговое окно (Администратор) Менеджер конфигурации ((Administrator) Configuration Manager) .
Примечание:
Если у вас нет прав администратора на данной машине, заголовок диалогового окна — Менеджер конфигурации , и вы не можете перейти в режим конструктора Task Assistant.
Примечание:
Если снять флаг Показывать вкладку Справка (Display the Help Tab) или Показывать вкладку История (Display the History Tab) , эти вкладки не будут отображаться в списке Активировать вкладку при открытии рабочего процесса (Activate Tab on Workflow Open) .
