Создаём Табы для сайта от старта до финала: функционал, css, теория

Сегодня много возможностей организовать на страницах сайта так называемые Табы (и вариантов), к примеру в конструкторах всяких… Однако мы сегодня рассмотрим способ создания Табов для сайта не прибегая к конструкторам, виджетам и пр: создадим функционал, дам примерный css, и теоретической части коснёмся непременно, это бывает полезно…

Вот, например, ранее была статья о том, как вывести данные пользователей в произвольном месте, можно как-то в Табах организовать, исключительно по требованию админа…

В инструкции добавим стили в файл шаблона, создадим и настроим и подключим js, (или так — CDN) дам структуру HTML, который возможно как-то разместить в шаблоне — либо напрямую, либо прицепить к какой-то функции (или action):

Код html для структуры кнопок

Даю пример кода, если используем шорткод (shortcode) или action — все это легко отстроить по требованию, прочтите этот пост по акшэн: — размещать данный код также возможно как угодно — напрямую в файле шаблона (либо создаете виджет), либо цепляете хуком… ну или как-то там ещё…

/**/
add_action( 'tabs2', 'shortcods_win_tabs2' ); // функция шорткода Табов
function shortcods_win_tabs2() { // для вывода в файлах или экшен: do_action( 'tabs2' ); = или do_shortcode( '[tabs2]' );
?><!-- noindex -->
<div class="tabcontrol">
<ul class="tabnavig">
<li><button class="tabs__button _active" data-tab="tab_1" title="">таб 1</button></li>
<li><button class="tabs__button" data-tab="tab_2" title="">таб 2</button></li>
<li><button class="tabs__button link" data-tab="tab_4"><a title="">таб 4</a></button></li>
</ul>

<div class="tabs__content">
<div class="tabs__item _active" id="tab_1"><div class="undertab"><span class="big">текст и пр<span class="colour"></span></span></div></div>

<div class="tabs__item" id="tab_2"><div class="undertab"><hr class="navs"><hr class="navs"><span class="big">текст<br />текст ...<span class="colour"></span></span></div></div></div>

<div class="tabs__item" id="tab_4"><div class="undertab"><hr class="navs"><hr class="navs"><span class="big"><div class="poesy_background" style="font-size:14px;">текст или что-то...<span class="colour"></span></span></div></div></div>

</div></div><hr class="navs navig"><!--/noindex--><?php // это .navs.navig display:none для мобил чтоб отступ
/**/

Если обратили внимание на атрибут _active в li для tab_1 — это тот таб, который будет по умолчанию открыт и подсвечен цветом текста вкладки!..

Ниже код: прицепляем js обработчик кнопок (табов) — дал вариант, если код js файла нужно отключить на мобильниках (), можете менять.

Или, если требуется подключение кода на всех девайсах, убираем обработку js на указанных разрешениях экранов — оставляем только скрипт-путь подключения файла, — кстати, здесь 778px на этом расширении экрана js не будет читаться сервером (это полезно если скрываем табы для мобильников! чтоб лишний js скрипт не отрабатывал, расходуя ресурсы!):

/*подкл JS*/
add_action( 'wp_footer', 'shortcods_win_tabs2_js', 22 ); // приоритет 22 нормально
function shortcods_win_tabs2_js() {
if ( is_home( )) { // отработка JS только для гл.стр. и мобил
?><!-- noindex --><script> if ( document.body.clientWidth>778) { document.write( "<script src='/wp-content/themes/nameTheme/js/wintabs.js'><\/script>" ); }</script><!--/noindex--><?php } }
/*подкл JS*/

Создаем, например, такой файл wintabs.js, добавляем данный чуть ниже код js и помещаем в папку в ядре шаблона. Готово!

код js для табов — можно помещать в файл, либо только на странице отработки табов (вне файла — в подвале)

Этот код, как говорил выше, можно поместить в отдельный файл шаблона (как подключать правильно JS в шаблоне — там по ссылкам), но можно и напрямую в файле, в котором организован функционал табов (рекомендую создать отдельный файл и вызывать на страницах его отработку, то бишь табы).

В общем, решайте как вам выгоднее сделать.

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 ) {
prevActiveButton.classList.remove( '_active' );
}
if ( prevActiveItem ) {
prevActiveItem.classList.remove( '_active' );
}
const nextActiveItemId = `#${btn.getAttribute( 'data-tab' )}`;
const nextActiveItem = document.querySelector( nextActiveItemId );
btn.classList.add( '_active' );
nextActiveItem.classList.add( '_active' );
});})

Теперь дам пример css; дизайн примерно такой, как на картинке ниже:

примерный css

Вот css — естественно, код правим по своим требованиям… (можно оставить таким как есть):

.tabcontrol ul.tabnavig li button{background-color:#f9f9f9;padding:5px 15px;border:1px solid #FFF;cursor:pointer}
.tabcontrol ul.tabnavig li button.selected{color:#454545}.tabcontrol ul.tabnavig li{margin:0 4px 3px 0;float:left;border:1px solid #C8C8C8}
.tabcontrol ul.tabnavig{margin:0;padding:0;height:37px}.tabcontrol ul li::before,.tabnavig ul li::before{content:none}
.tabs__item:not(._active){display:none}
.tabs__button._active,.tabs__button._active a,.tabs__button.link._active a,.tabs__button:hover,.tabs__button.link a:hover{color:#05c928}
.tabs__button.link a{color:#000;font-weight:normal;font-style:normal}

Вот всё, что хотел относительно текущей теме высказать.

Однако, если остались вопросы — если я что-то упустил — задавайте в комментариях, есть же комментарии и пр. варианты связаться с авторами…