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

В инете навалом статей про создание вкладок, однако там везде JQuery, да и вообще, все они жутко похожи друг на друга.

А вдруг у вас на сайте jQuery не используется? Тогда всё, что нам потребуется, это одна JavaScript-функция и немного хтмла.

Вот это, собственно, она и есть:

function SwitchTab(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';
}

Можете вынести её в отдельный js-файл и подключить, либо засунуть прямо в код — это неважно.

А вот и сами вкладки:

<ul>
	<li><a href="javascript:SwitchTab('tb_1', 'content_1');" id="tb_1" class="active">Первая</a></li>
	<li><a href="javascript:SwitchTab('tb_2', 'content_2');" id="tb_2">Вторая</a></li>
</ul>
 
<div id="content_1"> 
	<!-- содержимое первой вкладки -->
</div> 
<div id="content_2" style="display:none;">
	<!-- содержимое второй вкладки -->
</div>

Демо есть на сайте art8you.net, там вкладки находятся в сайдбаре.

Естественно, вкладок можно добавлять сколько угодно, а не только две или три, вы также можете расположить их по вертикали и по горизонтали при помощи CSS-стилей.

Миша Рудрастых Разработчик WordPress WooCommerce

Миша Рудрастых

Впервые познакомился с WordPress в 2009 году, и после двух лет мучений с Joomla и самописными движками это был просто бальзам на душу. С 2014 года меня можно встретить на WordCamp — официальной конфе по WP в Москве, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills в Питере.

Смотрите также