Раздел: Javascript Cookbook

Простые вкладки на Javascript + CSS3

Во время выполнения очередного заказа столкнулась с задачей реализации простых табов (tabs), т.к. первейшим приоритетом была скорость работы сайта. Поэтому вкладки требовалось сделать совсем простыми, вплоть до того, чтобы сделать их без javascript’а. Но без js никак не получится, если только мы не хотим использовать якоря на странице и портить внешний вид ссылки в адресной строке.
Эта статья будет полезна новичкам, т.к. она поможет быстро и просто разобраться и сделать js-табы на своей страничке.

Tabs
Итак, исходя из предыстории, все же пришлось использовать js, самый простой. В интернете множество готовых решений вкладок, но большинство базируется на jQuery, другие скрипты, самописные, имеют такой громоздкий код, что даже вникать в него нет времени и, честно говоря, не охота. Поэтому, как обычно, проще и быстрее сделать самому.
CSS3 в данном случае я использую для красивого оформления скругленных углов, теней без использования картинок.

HTML

<!--Чтобы js правильно работал не забудьте расставить порядковые номера у id вкладок (тег li), у id блоков с контентом и переменных вызываемой функции onclick="funcTab(N);". Иначе могут возникать ошибки.  -->
<div id="tab_block">
	<ul id="tabs">
	<li id="<span style='color: #d92b2b;'>tab1</span>" class="tab active" onclick="funcTab(1);"><span style="color: #222;">Tab1</span></li>
	<li id="<span style='color: #d92b2b;'>tab2</span>" class="tab" onclick="funcTab(2);"><span style="color: #222;">Tab2</span></li>
	<li id="<span style='color: #d92b2b;'>tab3</span>" class="tab" onclick="funcTab(3);"><span style="color: #222;">Tab3</span></li>
	<li id="<span style='color: #d92b2b;'>tab4</span>" class="tab" onclick="funcTab(4);"><span style="color: #222;">Tab4</span></li>
	</ul>
	<div id="tabs_content">
	<div class="tab_content active" id="<span style='color: #d92b2b;'>tab_content1</span>">
 	<p><span style="color: #222;">Tab1 The quick brown fox jumps over the lazy dog</span></p>
	</div>
	<div class="tab_content" id="<span style='color: #d92b2b;'>tab_content2</span>">
 	<p><span style="color: #222;">Tab2 The quick brown fox jumps over the lazy dog</span></p>
	</div>
	<div class="tab_content" id="<span style='color: #d92b2b;'>tab_content3</span>">
 	<p><span style="color: #222;">Tab3 The quick brown fox jumps over the lazy dog</span></p>
	</div>
	<div class="tab_content" id="<span style='color: #d92b2b;'>tab_content4</span>">
 	<p><span style="color: #222;">Tab4 The quick brown fox jumps over the lazy dog</span></p>
	</div>
	</div>
</div>

Javascript

<mark><script type="text/javascript"></mark>
<span>//функция funcTab(n) вызывается событием onclick на вкладке. N - номер вкладки, на которой кликнули</span>
<mark>function</mark> funcTab(n) {
<span>//получаем количество вкладок по классу. В нашем случае их - 4</span>
 <mark>var</mark> NTab = document.getElementsByClassName('<span style="color: #d92b2b;">tab</span>').length;
<span>//запускаем цикл по количеству табов. Начинаем с 1, а не 0, чтобы удобнее было подставлять значение счетчика в айдишники</span>
<mark>for</mark> (var i=1; i < NTab+1; i++) {
<span>//если значение счетчика цикла не равно номеру вкладки, на которую кликаем</span>
<mark>if</mark> (i != n){
<span>//текущая вкладка может быть активна или не активна, поэтому для гарантии делаем текущую вкладку все равно не активной, пропуская вкладку, на которой кликнули </span>
 document.getElementById('<span style="color: #d92b2b;">tab</span>'+i).className = 'tab';
<span>//тоже самое делаем для блоков с контентом</span>
 document.getElementById('<span style="color: #d92b2b;">tab_content</span>'+i).className = '<span style="color: #d92b2b;">tab_content</span>'
 }
}
<span>//теперь делаем таб, на котором кликнули, активным, меняя у него класс</span>
 document.getElementById('<span style="color: #d92b2b;">tab</span>'+n).className = '<span style="color: #d92b2b;">tab active</span>';
<span>//тоже самое для блока с контентом</span>
 document.getElementById('<span style="color: #d92b2b;">tab_content</span>'+n).className = '<span style="color: #d92b2b;">tab_content active</span>';
}
<mark></script></mark>

В итоге мы имеем простые и эффективные табы без лишних строчек кода.
Страничка с табами, скриптом и css-стилями:

Спасибо за внимание!

Комментировать

Комментарии

одиннадцать + 20 =

  1. Так хотел ругнуться, но воздержусь! Как Вы думаете сколько чайников в интернете??? Поэтому описывайте детально, что куда вставлять!!!!!!!!!!!!

    1. Зашел на конструктор сайтов.
    2. Открыл опцию «Вставить html или Javascript»
    3. Дальше что??????

  2. Спасибо! Отличное решение! Просто и работает как надо!)

    З.Ы.
    Если «введите ответ цЫфрами» — опечатка, а не специально, то не плохо бы исправить =)