Для создания группы вкладок на любой текстовой странице сайта на CMS Opencart 2 используется несложный код, в тексте страницы добавляем:
<div class="tabs">
<ul class="tabs__caption">
<li class="active">1-я вкладка</li>
<li>2-я вкладка</li>
</ul>
<div class="tabs__content active">
Содержимое первого блока
</div>
<div class="tabs__content">
Содержимое второго блока
</div>
</div><!-- .tabs-->
В файл CSS Вашего шаблона:
.tabs__content {
display: none; /* по умолчанию прячем все блоки */
}
.tabs__content.active {
display: block; /* по умолчанию показываем нужный блок */
}
В файл со скриптами, например jquery-2.1.1.min.js
(function($) {
$(function() {
$('ul.tabs__caption').on('click', 'li:not(.active)', function() {
$(this)
.addClass('active').siblings().removeClass('active')
.closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
});
});
})(jQuery);
Готово! Очистите кэш браузера, обновите модификаторы - вкладки готовы.
Предлагаем услуги раскрутки сайтов в Москве, а также - разработки и обслуживания сайтов.