В инете навалом статей про создание вкладок, однако там везде JQuery, да и вообще, все они жутко похожи друг на друга.
А вдруг у вас на сайте jQuery не используется? Тогда всё, что нам потребуется, это одна JavaScript-функция и немного хтмла.
Вот это, собственно, она и есть:
function SwitchTab(my_tab, my_content) { document.getElementById('content_1').style.display = 'none'; document.getElementById('content_2').style.display = 'none'; document.getElementById(my_content).style.display = 'block'; document.getElementById('tb_1').className = ''; document.getElementById('tb_2').className = ''; document.getElementById(my_tab).className = 'active'; }
Можете вынести её в отдельный js-файл и подключить, либо засунуть прямо в код — это неважно.
А вот и сами вкладки:
<ul> <li><a href="javascript:SwitchTab('tb_1', 'content_1');" id="tb_1" class="active">Первая</a></li> <li><a href="javascript:SwitchTab('tb_2', 'content_2');" id="tb_2">Вторая</a></li> </ul> <div id="content_1"> <!-- содержимое первой вкладки --> </div> <div id="content_2" style="display:none;"> <!-- содержимое второй вкладки --> </div>
Демо есть на сайте art8you.net, там вкладки находятся в сайдбаре.
Естественно, вкладок можно добавлять сколько угодно, а не только две или три, вы также можете расположить их по вертикали и по горизонтали при помощи CSS-стилей.
Очень хороший пример, довольно простой. Но этот код работает, если на странице один блок со вкладками. Если их несколько на странице, то переключаются вкладки только первого блока. Как сделать чтобы все блоки работали нормально?
нужно прописывать разные ID элементов)
и пусть для каждых вкладок будет своя функция
Количество таких блоков не определённо. Создается несколько документов и выводится на одной странице. Есть например переменная - уникальный номер документа или код изделия. Как в таком скрипте вместо content_1 и tb_1 прописать уникальный номер через переменные: код-content_1 и код-tb_1?
аналогично будет и в HTML:
но если переменная $kod будет цифрой, то лучше вставлять его не перед словом, а после)
И еще маленький вопросик)) Все работает, если код ($kod) состоит из букв. Но код вводится буквами и цифрами, и возможно только цифрами, и в таком случае вкладки не работают. Пробовала до и после слова ставить - не получается. Формат поля ввода кода текстовый. Что еще нужно сделать?
по идее это должно помочь))
Можно я взгляну на твой сайт?
Не помогает после слова, может я тебя не понимаю...
Вот здесь сайт: fabrica.0fees.net
вижу, что уже всё работает))
Не, не работает, просто в поле буквы прописала, там где цифры - не работает...
Да, работает!)) Оказывается не работало там, где код указывался с тире -.
Спасибо большое!!
отлично)) ну да, тире в названиях функций быть не должно, скрипт думает, что это "минус" )
Что-то не хочет у меня работать, пойду настраивать.