Вкладки на jQuery

24/12/2012  jQuery, скрипты

Как сделать вкладки с использованием js-скрипта

  1. Прописываем на странице разметку вкладок.
  2. Подключаем стили CSS внешним файлом или в разметке страницы.
  3. Подключаем библиотеку jQuery и скрипт вкладок внешним файлом или в разметке страницы.

HTML

<ul class='tabs'>
<li><a href='#tab1'>Вкладка_1</a></li>
<li><a href='#tab2'>Вкладка_2</a></li>
<li><a href='#tab3'>Вкладка_3</a></li>
</ul>
<div id="tab1">
<p>Любое содержимое первой вкладки</p>
</div>
<div id="tab2">
<p>Любое содержимое второй вкладки</p>
</div>
<div id="tab3">
<p>Любое содержимое третьей вкладки</p>
</div>

CSS

#tab1, #tab2, #tab3 {
padding:10px;
}
.tabs li {
list-style:none;
display:inline;
}
.tabs a {
padding:5px 10px;
display:inline-block;
text-decoration: underline;
}
.tabs a.active {
text-decoration: none;
}

JS


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('ul.tabs').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e){
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
});
</script>

Для установки фиксированной ширины вкладок, например, 350px, нужно приписать в стилях width: 350px. Для улучшения восприятия, можно сделать один фон для вкладки и активной ссылки.

В случае необходимости установки еще одного блока вкладок, нужно присвоить другие идентификаторы.

<ul class='tabs'>
<li><a href='#tab4'>Вкладка_1</a></li>
<li><a href='#tab5'>Вкладка_2</a></li>
</ul>
<div id="tab4">
<p>Содержимое первой вкладки второго блока</p>
</div>
<div id="tab5">
<p>Содержимое второй вкладки второго блока</p>
</div>

Содержимое 1-й вкладки второго блока

Содержимое 2-й вкладки второго блока

Михаил Апсолямов
Михаил Апсолямов Создаю сайты. Оказываю услуги seo-продвижения. Провожу аудиты сайтов. Пишу статьи на заказ. Услуги и цены.

 

наверх