Открытие конкретной вкладки информационной панели при нажатии на виджет типа «HTML»

Реализована функция setTab для открытия конкретной вкладки информационной панели при нажатии на виджет типа «HTML». Для функции setTab необходимо указать параметр – ID вкладки: setTab (ID вкладки).

Примечание
ID вкладки можно узнать в окне разработчика (Рисунок «Отображение ID вкладки в окне разработчика»).

Рисунок 13. Отображение ID вкладки в окне разработчика

Отображение ID вкладки в окне разработчика

Пример

На вкладке «Вкладка 1» информационной панели располагается виджет типа «HTML» с кнопками перехода на вкладки «Вкладка 2» и «Вкладка 3». Скрипты для виджета типа «HTML»:

  • настройка с помощью кода HTML:

    <div id='button1' class='button' >
    Переход на вкладку 2
    </div> 
    <div clear:both; > </div>
    <div id='button2' class='button' >
    Переход на вкладку 3
    </div>
    • 
                                 
  • 
                                    
    настройка с помощью кода CSS:
    .button
    {   margin: 5px;
        background-color: #4CAF50; /* Green */
        border: solid rgb(255, 253, 253);
        color: rgb(255, 253, 253);
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius:30px;
    }
    • 
                                 
  • 
                                    
    настройка с помощью кода JS:
    const button1 = document.getElementById('button1');
    button1.addEventListener('click', () => setTab(3856));
    const button2 = document.getElementById('button2');
    button2.addEventListener('click', () => setTab(3857));
    • 
                              

                           

                                                           
                           
Результат настройки виджета типа «HTML» с использованием
                                                                  функции setTab представлен на рисунке ниже (Рисунок «Результат настройки
                                                                         виджета типа «HTML» с использованием функции
                                                                     setTab»).
                           

                                                           
                           
Использование виджета типа «HTML» с функцией setTab в
                                                                  информационной панели: при нажатии на кнопку «Переход на вкладку
                                                                  2» откроется вкладка «Вкладка2», при нажатии на кнопку «Переход
                                                                  на вкладку 3» откроется вкладка «Вкладка3» (Рисунок «Использование виджета
                                                                         типа «HTML» с функцией setTab в информационной
                                                                         панели»).
                           

                                                       
                        		
                     

                  
               

            

            
Рисунок 14. Результат настройки виджета типа «HTML» с использованием функции
                                         setTab

               

                  
Результат настройки виджета типа «HTML» с использованием функции setTab

               

            

Рисунок 15. Использование виджета типа «HTML» с функцией setTab в информационной
                                         панели

               

                  
Использование виджета типа «HTML» с функцией setTab в информационной панели

               

            


            

            

               

                  Пред. 
                  
                  Наверх
                   След.
               

               

                   
                  Начало