Вкладки на jQuery
24/12/2012
Как сделать вкладки с использованием js-скрипта
- Прописываем на странице разметку вкладок.
- Подключаем стили CSS внешним файлом или в разметке страницы.
- Подключаем библиотеку 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, контент-маркетинг, SMM, обслуживание и техподдержка проектов. Опыт — 15 лет. Подробнее
Продвигаю бизнес в интернете: разработка стратегии, создание сайта, SEO, контент-маркетинг, SMM, обслуживание и техподдержка проектов. Опыт — 15 лет. Подробнее