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

CSS, HTML, JavaScript  /  14 комментариев

В инете навалом статей про создание вкладок, однако там везде 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. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Комментарии — 14

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

× Отменить ответ

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.