Создаем удобные, практичные вкладки с помощью jQuery

Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью "Универсальный jQuery-скрипт для блоков с вкладками (табами)". * * * Примерно последние месяц-два на англоязычных блогах мне стали попадаться на глаза блоки в сайдбаре, переключаемые с помощью вкладок-табуляторов, которые, судя по всему, становятся ...

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

  1. Давно ждал именно этой статьи, даже просил как-то ее написать — огромное спасибо!!!
    Буду думать, как лучше к себе в блог такое припаять ;)

  2. Спасибо за статью, очень полезно, ведь иногда для оптимального юзабилити приходится увеличивать свободное пространство на странице.

    https://dimox.name/examples/accessible-tabs-with-jquery.html — 404…

  3. Feelov, да, я это помню :) На здоровье.

    Gojas, думал же я, что что-то забыл :) Спасибо за подсказку.

  4. > Поскольку у тега ссылок во вкладках не используется параметр href…

    А почему бы, собственно, и не использовать параметр href? Достаточно чтобы onclick возвращал false, и не будет никакого прокручивания. А a без href, насколько я понимаю, вообще невалидно.

  5. А a без href, насколько я понимаю, вообще невалидно.
    это да)

    попариться пришлесь со скриптом)
    спасибо, нужная вещь

  6. И что хорошо, малополезное для читателя, но жутко полезное для перелинковки облако тегов успешно прячется на второстепенной вкладке :)

  7. Давид Мзареулян, Техник, почему вы решили, что не проходит валидацию? Только что проверил — успешно проходит. Так что все легально :)

    А href не используется, видимо, потому, что нет события onclick. Если вы знаете и подскажете, как его прикрутить, буду рад.

  8. У меня неправильно отображаются вкладки :( Они накладываются одна на другую.
    Я так понимаю так не должно быть?
    Браузер Опера.

    Посмотреть можна здесь trouble

  9. Да, вся навигация onegadget.ru из этих вклаок сделана =))

  10. XAMelleOH, не должно. Наверное, это кеш.

  11. Дима, а как поисковый робот относится к этим вкладкам, известно?

  12. Ильшат, вообще-то, как мы знаем, поисковики не одобряют скрытый текст, принимая его за поисковый спам. Но подобные закладки, согласись, повышают юзабилити сайта, а посему глупо будет принимать это за спам.

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

  13. http://docs.jquery.com/UI/Tabs

  14. Хм… скачал архив, winrar и tc жалуются, что архив поврежден.

  15. Попробуй снова скачать. С архивом все в порядке.

  16. Попробовал, огонь :]

  17. У меня почему-то при входе на страницу содержимое сразу двух вкладок вылезает. а потом когда нажмешь на одну из вкладок — всё нормально, и вскрываются они попеременно.

  18. Значит либо не написан стиль из 3-го пункта, либо что-то неправильно изменили в скрипте.

  19. Help! Подскажите как сделать чтобы вкладка оставалась активно даже после обновления страницы как сделано на http://new.skoda-auto.com/COM/innovation/design/Pages/skodadesign2.aspx либо на http://www.skoda-avto.ru/pub.html?docid=3319. Буду очень благодарен

  20. Dimox,

    $j(‘ul.tabs.tabs1 li’).click(function(event){
    var thisClass = this.className.slice(0,2);
    $j(‘div.t1’).hide();
    $j(‘div.t2’).hide();
    $j(‘div.’ + thisClass).show();
    $j(‘ul.tabs.tabs1 li’).removeClass(‘tab-current’);
    $j(this).addClass(‘tab-current’);
    event.preventDeafult();
    });
    });

    А в href писать что-либо. )