Как сделать табы в карточке товара?

Question

[Jack OXO]

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

Comments

[Дмитрий]

Непонятно, что вы имеете ввиду - ссылки / закладки типа "Все". "фото", "видео" и т.д.? Тогда ваше суждение неверно - изначально показывается содержимое вкладки "Все", просто сама ссылка не выделена. Но если вы начнете ходить по этим ссылкам, то увидите, что нажатие на "Все" отображает тоже самое, что и было сразу после загрузки страницы.

[Jack OXO]

Дмитрий: Ну вообщем, как на примере надо. Есть ли что-то похожее?

[Дмитрий]

OXOJeck: я же пишу, что не понял конкретно, что вы имеете ввиду. Ваш пример - это целая страница, скажите хотя бы, какие именно элементы служат примером. А если я правильно понял вопрос и текст первого коммента верный, то можно использовать jqueryui tabs, тогда и писать ничего не придется, просто стилизовать

[Jack OXO]

Дмитрий: да, закладка "Все", "фото", "видео" и др. Я поставил себе jqueryui tabs, но не понял как допилить, есть ли примеры, чтобы сначала было все раскрытым на странице, а потом... ну как на примере? Спасибо.

Answer 1

[Дмитрий]

Посмотрите пример - сделал для вас безо всяких доп библиотек, думаю поймете суть
jsfiddle.net/rbweqkv5/2

Comments

[Jack OXO]

Огромное спасибо! То что нужно

[Jack OXO]

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

[Дмитрий]

OXOJeck: в какой момент? при инициализации или после клика на ссылку?

[Jack OXO]

Дмитрий: при инициализации. У многих товаров не будет, например, видео, соответственно, если div с id="video" пустой, но не отображать его.

[Дмитрий]

OXOJeck: если нет видео, то просто не отображайте в шаблоне ссылку "видео" и DIV для видео.

[Jack OXO]

Дмитрий: видео будет, но не у всех товаров. У тех у кого не будет (вкладка без содержимого), собственно саму вкладку и не надо отображать (в "display: none" поставить её).

[Дмитрий]

у вас товары генерируются на Backend-е, выводятся каким-то шаблоном. Так вот прямо в выводе, если у товара нет видео, то не выводите вообще эту вкладку и DIV для нее

[Jack OXO]

Дмитрий: хм, точно, как-то не подумал, спасибо!