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

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

Комментарии (51)
  1. 1

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

  2. 2

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

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

  3. 3

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

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

  4. 4

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

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

  5. 5

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

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

  6. 6
    Easy Money
    @

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

  7. 7

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

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

  8. 8
    XAMelleOH
    @

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

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

  9. 9

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

  10. 10

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

  11. 11
    gordi

    Вещь хорошая, но размер JS впечатляет :)
    Практически тоже самое http://trifler.ru/blog/post_1177441700.html, с возможной модификацией скрипта и оформления само собой,
    а размер можете оценить сами :)

  12. 12

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

  13. 13

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

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

  14. 14
    шкутер

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

  15. 15

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

  16. 16

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

  17. 17

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

  18. 18
    Дмитрий

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

  19. 19

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

  20. 20
    Сергей

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