Вкладки на jQuery

24 декабря 2012  2029  jQuery, скрипты

 

  1. Прописываем на странице разметку вкладок.
  2. Подключаем библиотеку jQuery и скрипт вкладок внешним файлом или в разметке страницы.
  3. Подключаем стили CSS внешним файлом или в разметке страницы.
<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>
$(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();
        });
    });
});
#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;
}

Для установки фиксированной ширины вкладок, например, 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

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

Источник - http://www.jacklmoore.com/notes/jquery-tabs

 

Комментарии для сайта Cackle
наверх