Получить мгновенный хостинг с Plaseor и Premizer Pro

С CDN, SSL и резервными копиями.

Начните сегодня

Как открыть определенный переключатель Elementor, вкладку или аккордеон с помощью кнопки

Muneeb Учебные пособия по WordPress Jan 22, 2022

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

Есть несколько способов сделать переключатели, вкладки или аккордеоны доступными. В то же время в этом руководстве мы узнаем, как использовать кнопку для доступа к определенному переключателю, вкладке или аккордеону Elementor .

Как открыть определенный переключатель Elementor, вкладку или аккордеон

В этом уроке у нас есть разные коды для разных целей, перечисленных ниже. Обязательно выберите код, который лучше всего подходит для вашей желаемой задачи.

Для начала создайте элемент HTML и скопируйте необходимый код.

Начать

Разместите HTML-элемент на странице как можно ближе к вкладке, аккордеону или переключателю. Затем добавьте необходимый код.

1. Код для аккордеона

Атрибут: data-accordion-open|x

document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ let accordionTitles = $('.elementor-accordion-item .elementor-tab-title'); let openers = document.querySelectorAll('[data-accordion-open]'); openers.forEach( (e,i) =

2. Код для переключения Elementor

Атрибут: data-toggle-open|x

document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ let toggletitles = $('.elementor-toggle-item .elementor-tab-title'); let openers = document.querySelectorAll('[data-toggle-open]'); openers.forEach( (e,i) =

3. Код для вкладок

Атрибут: data-tab-open|x

document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ let desktoptitles = $('.elementor-tab-desktop-title'); let mobiletitles = $('.elementor-tab-mobile-title'); let isMobile = window.innerWidth { e.addEventListener('click',function(){ let openThis = e.getAttribute('data-tab-open'); if (!(desktoptitles.eq(openThis).hasClass('elementor-active'))){ desktoptitles.eq(openThis).click(); } if (!(mobiletitles.eq(openThis).hasClass('elementor-active'))){ mobiletitles.eq(openThis).click(); } $('html, body').animate({ scrollTop: isMobile? mobiletitles.eq(openThis).offset().top - 100 : desktoptitles.eq(openThis).offset().top - 100 },'slow'); }); }); } ); });

4. Код для вкладок EA

Атрибут: data-tab-open|x

document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ let eaTabsTitles = $('.eael-tabs-nav li'); let openers = document.querySelectorAll('[data-tab-open]'); openers.forEach( (e,i) =

5. Код для аккордеона EA

Атрибут: data-accordion-open|x

document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ let eaAccordionTitles = $('.eael-accordion-header'); let openers = document.querySelectorAll('[data-accordion-open]'); openers.forEach( (e,i) =

Теперь создайте ссылку для кнопки, которая будет открывать вкладку, переключатель или аккордеон удаленно.

После этого обновите свойство атрибутов кнопки. Перейдите на вкладку «Дополнительно», затем разверните меню атрибутов .

JS — это система индексации с нулевым отсчетом. Чтобы открыть первый, второй и третий переключатели, измените целое число на 0,1,2.

Наконец, вкладка Elementor Toggle Tab, Toggle и Accordion Opener готовы к использованию. Вот как Elementor упрощает вашу жизнь и позволяет сделать ваш веб-сайт доступным, чтобы вашим пользователям не приходилось много суетиться.

Это все от нас для этого урока. Для получения дополнительных руководств и обновлений обязательно присоединяйтесь к нам на наших Facebook и Twitter .