Универсальный jQuery-скрипт для блоков с вкладками (табами)

Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...

Комментарии (970)

  1. Хотел прикрутить аналогичный скрипт, но на всех страницах кроме главной отображался тупо текст вместо вкладок, а с этим все заработало как надо, спасибо. Так что изобретать такие колеса надо, раз предыдущие колеса квадратные =)

  2. Вобщем, вот исправленный вариант, где можно вставлять табы внутри табов:

    (function($) {
    $(function() {
    
        $('ul.tabs').each(function() {
      $(this).find('li').each(function(i) {
          $(this).click(function(){
        $(this).addClass('current').siblings().removeClass('current');
        //var p = $(this).parents('div.section');
        var p = $(this).parents('div.section:first');
        //p.find('div.box').hide();
        p.find('>div.box').hide();
        //p.find('div.box:eq('+i+')').show();
        p.find('>div.box:eq('+i+')').show();
          });
      });
        });
    
    })
    })(jQuery)

    Закомментированы строки, которые были ранее.

  3. Я уписал табы в две строки кода.

    $('li.t').click(function(){$( '.content > div').hide() ;
    $( '#' + $( this ).attr( 'rel' ) ).toggle();});

    Кому интересно, — пример реализации здесь

  4. Да, так… Но при генерации html средствами скажем php, в нуменации нет проблем.
    Я пытался избавить скрипт от поиска нужного элемента. Именно на это тратится основной код и время.

  5. Отличная штука. Давно хотел что то подобно на блоге сделать, стоит задуматься. Правда надо дизайнера попанать…
    Очень понравилось как вы сделали Reated Posts + Recent Post в конце статьи…

  6. Вот блин…затупил что то я :( А как же быть если у меня в сайдбаре виджеты отображаются, а не кодом через sidebar.php выводится содержимое? :(

  7. Очень интересный скрипт, а как вы сделали так, что при выделении текста курсором бек становится оранжевым?

  8. Спасибо за статью,но вот столкнулся с такой проблемой что внутри вкладки при переключение на новую не срабатывают скрипты что находятся внутри вкладки,можно ли как нибудь это исправить?

  9. Большое спасибо. Мне пригодится этот пост. Скрипт очень нужный и полезный.

  10. Спасибо.Полезно. Возьму на заметку!
    И на сайты свои, наверное, добавлю — вещь интересная.

  11. Ооо.. спасибо, попробовал на своем блоге ;)

  12. А ещё подскажите как с помощью куков сделать запоминание последней открытой вкладки

  13. Дмитрий,огромное спасибо за статью=)

  14. Подскажите плз, а как в ваши табы вставить функции вывод последних записей, комментов и рубрики новостей, например?

  15. Спасибо за скрипт, очень понравился. Использую вариант с cookie, для запоминания открытого таба. Вот только вопрос возник, можно ли сделать так, чтобы для отдельно взятой страницы прописывались свои cookie? А то сейчас получается, открыл я например второй таб на первой странице, перешёл на допустим на третью, а там уже открыт второй таб, а хотелось бы, чтобы для каждой страницы было индивидуально.

    • Вот этого я не знаю.

    • Если выбор открытого таба для определённой страницы неизменен, то легче всего присваивать class=»current» нужному табу при генерации страницы.
      Если предстоит запоминать выбор, то придется раскладывать дополнительные куки.

      • Меня, как раз, второе интересует. В jQuery я фактически 0, поэтому, не могли бы вы поподробней рассказать, как лучше реализовать всё это дело?

        P.S. Предложили ещё такой вариант — поставить куке path аналогичный адресу страницы. Чтобы браузер не посылал это же куку при запросе других страниц.

    • В плагине находим строчку:

      document.cookie = name+»=»+value+expires+»; path=/»;

      в которой есть

      path=/

      Вместо

      /

      пишем

      /demo-page.html

      Тогда куки будут запоминаться для конкретной страницы.

  16. Yamanga, о jQuery все можешь спросить здесь http://www.linkexchanger.su/forum/
    Пости вопрос, поможем.

  17. За статью спасибо! Очень пригодилось. Только жаль, что переключение не плавное — просто моргает. Как сделать, чтобы табы плавно переключались, как в этом примере: http://bitby.net/wp-demo/web/tabs1.html ?

  18. Подскажите, кто силён в jQuery, как прикрутить анимацию (плавное появление) к табам с куками чтобы не перекидывало в начало страницы?
    Попробовал взять за основу код этого блога, но чтото запутался в скрипте, мало я ещё соображаю в jQuery.

  19. Классная штука! Спасибо.
    В своё время я тоже использовал самописный простенький скрипт (здесь он в действии) + к ниму такой же простенький аналог ajax’а.

  20. Скрипт просто сказка. Только не работаю вложенные вертикальные вкладки с вложенными горизонтальными вкладками :-(( помогите исправить

Ваш комментарий