Web Factory > WordPress > Создание вкладок без использования JQuery

Создание вкладок без использования JQuery

Иногда при разработке своего функционала в вордпресс необходимо на кастомную страницу или в плагин добавить вкладки. Есть способы использовать jQueri UI — но если у вас нет на сайте jQuery — то что устанавливать целую библиотеку только из-за вкладок ? Нет, к счастью не нужно, можно использовать стандартные вкладки WordPress, только нужно знать, как их подключить.

Добавляем вкладки

Можно использовать JavaScript и код HTML, вот пример функции JS, который можно либо вынести во внешний файл, либо разместить в любом вашем собственном файле.

function selectTab(my_tab, my_content) {
	document.getElementById('content_1').style.display = 'none';
	document.getElementById('content_2').style.display = 'none';
	document.getElementById(my_content).style.display = 'block';  
	document.getElementById('tb_1').className = '';
	document.getElementById('tb_2').className = '';
	document.getElementById(my_tab).className = 'active';
}

а теперь добавляем код самих вкладок, его размещаем в функции, которая выводит информацию на кастомной странице в админке


<ul>
	
<li><a href="javascript:selectTab('tb_1', 'content_1');" id="tb_1" class="active">Первая</a></li>


<li><a href="javascript:selectTab('tb_2', 'content_2');" id="tb_2">Вторая</a></li>

</ul>


<div id="content_1"> 
	<!-- первая вкладка -->
</div>


<div id="content_2" style="display:none;">
	<!-- вторая вкладка -->
</div>

Такой способ позволит быстро добавть вкладку для страницы WordPress.


Опубликовано:

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

avatar
  Подписаться  
Уведомление о