Как сделать чтобы вкладка сайта всегда была активной?

Создаем один проект, в котором есть чат личных сообщений свой внутренний мессенджер.. Пока вкладка сайта активна человек получает звуковое уведомление на сайте о новых сообщения и т.д. Но через некоторое время вкладка сайта престает быть активной и соответственно пропадаю уведомления. Надо сделать что бы она была всегда активно и человек получал уведомление как в том же вк.
Используем Vue.js php

Дополнительно:

Содержание

1 Дополнительно:
2 Ответы:

Ответы:

Ну что-то вроде, если с передачей параметра tab в url... в head

&lt;script&gt; function setActiveTab(tabId) {   localStorage.setItem("activeTab", tabId); }  function getActiveTab() {   return localStorage.getItem("activeTab"); } &lt;/script&gt;

1	<script> function setActiveTab(tabId) { localStorage.setItem("activeTab", tabId); } function getActiveTab() { return localStorage.getItem("activeTab"); } </script>

Для вкладки нужно создать компонент

&lt;template&gt;   &lt;li :class="{ active: isActive }" @click="setActiveTab"&gt;     &lt;a href="#"&gt;Моя вкладка&lt;/a&gt;   &lt;/li&gt; &lt;/template&gt;  &lt;script&gt; export default {   computed: {     isActive() {       return this.id === this.getActiveTab();     },   },   methods: {     setActiveTab() {       setActiveTab(this.id);     },     getActiveTab() {       return getActiveTab();     },   },   props: ["id"], }; &lt;/script&gt;

<template> <li :class="{ active: isActive }" @click="setActiveTab"> <a href="#">Моя вкладка</a> </li> </template> <script> export default { computed: { isActive() { return this.id === this.getActiveTab(); }, }, methods: { setActiveTab() { setActiveTab(this.id); }, getActiveTab() { return getActiveTab(); }, }, props: ["id"], }; </script>

В самом приложении Vue.js добавить код на странице с вкладками... типо

&lt;template&gt;   &lt;div&gt;     &lt;ul&gt;       &lt;my-tab id="tab-1" /&gt;       &lt;my-tab id="tab-2" /&gt;       &lt;my-tab id="tab-3" /&gt;     &lt;/ul&gt;   &lt;/div&gt; &lt;/template&gt;  &lt;script&gt; import MyTab from "./MyTab"; export default {   components: {     MyTab,   },   mounted() {     const activeTab = getActiveTab() || "tab-1"; // по умолчанию, активна будет первая вкладка     setActiveTab(activeTab);   }, }; &lt;/script&gt;

<template> <div> <ul> <my-tab id="tab-1" /> <my-tab id="tab-2" /> <my-tab id="tab-3" /> </ul> </div> </template> <script> import MyTab from "./MyTab"; export default { components: { MyTab, }, mounted() { const activeTab = getActiveTab() || "tab-1"; // по умолчанию, активна будет первая вкладка setActiveTab(activeTab); }, }; </script>

Ну и в PHP где идет генерация заголовка вкладки, добавить:

&lt;title&gt; &lt;?php $tabId = $_GET["tab"]; if ($tabId) {   echo $tabs[$tabId]["title"]; } else {   echo $tabs["tab-1"]["title"]; // по умолчанию активна первая вкладка } ?&gt; &lt;/title&gt;

1	<title> <?php $tabId = $_GET["tab"]; if ($tabId) { echo $tabs[$tabId]["title"]; } else { echo $tabs["tab-1"]["title"]; // по умолчанию активна первая вкладка } ?> </title>

То есть юзаем localStorage, чтобы сохранить id активной вкладки между сеансами. Чтобы на сервере еще это хранить, нужно будет подрубить сессию для выбранной вкладки.

+ Заказать

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

Есть ответ
07.04.2024

Ответить

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

    document.addEventListener('DOMContentLoaded', function() {
      document.querySelector('#myTab a').addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector('#myTab a.active').classList.remove('active');
        this.classList.add('active');
      });
    });
  
  
    .active {
      color: red;
    }
  


  <ul id="myTab">
    <li><a href="#" class="active">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>

document.addEventListener('DOMContentLoaded', function() {

document.querySelector('#myTab a').addEventListener('click', function(e) {

e.preventDefault();

document.querySelector('#myTab a.active').classList.remove('active');

this.classList.add('active');

});

.active {

color: red;

}

</ul>

В данном примере мы добавляем обработчик события на клик по элементу a внутри списка с идентификатором myTab. При клике мы удаляем класс active у текущей активной вкладки и добавляем его к новой вкладке, на которую пользователь кликнул.

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

Как сделать чтобы вкладка сайта всегда была активной?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как сделать чтобы вкладка сайта всегда была активной?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно