Как сделать табы на php
Табы (вкладки) для сайта на CSS и JavaScript – 3 способа
В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.
Что такое табы?
На странице очень часто бывает необходимо вывести большое количество информации.
Для того чтобы эту информацию не отображать всю сразу, её можно разделить на части и выводить пользователю в определённый момент времени только одну из них.
Табы (вкладки) – это как раз и есть тот элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько определённых частей.
В вебе табы – это просто набор ссылок или других HTML элементов, которые визуально можно представить по-разному: в виде вкладок, группы кнопок и другими способами. По сути, они просто включают видимость какого-то одного блока с контентом, скрывая при этом другие.
Табы предназначены для экономии места и более удобного представления информации на сайте (по названию вкладки можно определить какой контент отобразится на странице, если нажать на неё).
Вкладки на чистом CSS
Рассмотрим несколько способов создания табов на CSS.
Первый способ построен на радиокнопках ( input с type=»radio» ) и CSS селекторе checked.
HTML и CSS код таба:
Отображение и скрытие контента, связанного с вкладками, выполняется очень просто. По умолчанию элементы, содержащие контент, не отображаются. Показ того или иного элемента с контентом осуществляется только в том случае, если селектор в следующем правиле позволяет выбрать его:
CSS код для создания адаптивных вкладок в виде кнопок:
В этом примере вкладки визуально представлены в виде хэштегов :
Второй способ основывается на использовании псевдокласса :target.
Пример HTML и CSS кода для создания адаптивных вкладок, механизм работы которых организован через :target :
Логика этих табов основана на следующих моментах. Первый момент заключается в добавлении хэша к URL-адресу страницы при нажатии на ссылку (вкладку). Второй – это стилизация элементов, выбор которых осуществляется в зависимости от хэша в URL-адресе. Выбрать элемент, идентификатор которого соответствует хэшу в URL-адресе в CSS можно выполнить посредством псевдокласса :target. С помощью него мы можем написать селектор не только для получения элемента, на который он указывает, но и для выбора других элементов, которые каким-то определённым образом связаны с ним.
Например, выбрать вкладку, которая должна быть активной для элемента на который указывает :target можно так:
В зависимости от дизайна проекта табы можно визуально представить так, как вам это нужно.
Например, чтобы сделать вкладки вертикальными их код можно изменить на следующий:
При этом табы отображаются вертикально только на больших экранах, а на маленьких (мобильных) они отображаются горизонтально. Адаптивность табов в коде реализуется с помощью медиа-запросов.
Табы с использованием JavaScript
В этом разделе разберём как можно создать табы на чистом JavaScript (без использования библиотеки jQuery).
Способ реализации вкладок с использованием JavaScript может потребоваться, когда в них нужно, например показывать динамический контент, получаемый через AJAX.
HTML и CSS код вкладок:
При этом инициализирован будет только первый контейнер с вкладками, имеющий указанный класс.
Для того чтобы на странице инициализировать сразу все вкладки, имеющие этот класс, можно, например, использовать следующий код:
Примеры
1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:
2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):
3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:
Описание исходного JavaScript кода
Делаем адаптивные табы без javascript и грязных хаков
В продолжение предыдущего поста про стилизацию элементов выбора, хотел бы рассказать как сделать полностью адаптивные табы без использования javascript, абсолютного позиционирования и хаков с ссылками.
Для начала хотел бы сказать, что я не призываю отказаться от javascript в пользу лишь CSS, ниже будет представлен лишь один из способов реализации табов. Существует множество ситуаций, когда такой подход вам не подойдёт и где без JS не обойтись, но сейчас не об этом.
Давайте поймём что мы хотим видеть в качестве результата работы и какие требования мы выдвигаем к нему:
Визуально должно получиться что-то подобное:
Перед тем как показать свой вариант табов без JS, я хотел бы рассказать о некоторых вариантах реализаций, которые я нашёл в процессе решения этой задачи.
Вариант первый
Человек придумавший этот способ либо явно хотел поиздеваться над пользователями, либо он один из посетителей реддита, который создавал те самые «удобные» регуляторы громкости. У меня подобный подход вызывает нервный тик.
Суть метода заключается в следующем:
Как вы могли заметить мы имеем кое-какие проблемы с использованием данного метода:
Делаем оправданный вывод: этот метод нам не подходит так как не удовлетворят большей части требований. Реализации ужасная и я не советовал бы её использовать.
Вариант второй
Вот как это работает:
Как вы могли заметить, в этом примере мы используем position: absolute; для того, чтобы разместить заголовки вкладок сверху, а контент вкладки снизу. Это создаёт определённые проблемы:
Конечно, в некоторых случаях этот метод можно применять, на пример, когда вы заранее знаете количество вкладок и объём контента внутри них. Но мы ищем универсальное решение, поэтому данный подход не применим в нашем случае.
Решение
Третий вариант, и он же решение, является модификацией второго метода. Работает он точно так же, однако мы не будем использовать абсолютное позиционирование и свойство float для заголовков.
Данный подход работает во всех современных браузерах, включая мобильные. Из, непривычных для многих, свойств используется только Flexbox, а он уже давно имеет широкую поддержку. В браузерах FireFox, Chrome, Safari и Opera мною не было обнаружено каких-либо проблем с работой вкладок.
Я добавил немного стилей, чтобы вкладки выглядели поинтересней.
Вы можете проверить данный подход на jsfiddle, или на своих проектах. Буду рад увидеть и другие предложения решений данной проблемы в комментариях.
Простые адаптивные вкладки (табы) для сайта на JavaScript и CSS
Дата публикации: 2015-11-03
От автора: в данной статье мы рассмотрим, как сделать макет из нескольких адаптивных вкладок (табов) для сайта на JavaScript и CSS 3, который просто отлично подходит в тех случаях, когда необходимо вместить много связанного контента в маленькой и компактной области.
Часто вкладки можно встретить в блогах в виде виджетов сайдбаров, в которых, обычно, отображаются последние или любимые посты, или категории. Но помимо второстепенной роли вкладкам (табам) также отводят и главную роль на страницах. К счастью создавать вкладки (табы) для сайта не такое и сложное занятие. В этой статье мы рассмотрим все, что необходимо для их создания, даже позаботимся о устаревших браузерах с выключенным JS. Давайте разберем структуру и разметку вкладок.
Структура и разметка
Итак, наша структура включает в себя:
Секцию меню с вкладками. Активная вкладка подсвечивается
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
И сами вкладки, которые или спрятаны, или видны
Вся конструкция помещается в главный DIV, который будет использоваться в JS для нахождения дочерних элементов. Начнем разметку:
Значение для идентификатора можно взять любое, оно пригодится позже в JavaScript. Также обратите внимание на класс no-js, его мы будем удалять перед манипуляциями с JS. Если вы работали с библиотеками с методом обнаружения поддерживаемых свойств, как Modernizr, то вам это будет знакомо. Добавим меню:
Я сразу сделал первую вкладку активной, первый индекс в JavaScript будет 0. Обратите внимание на то, что количество вкладок может изменяться, но обязательно необходимо, чтобы количество табов и ссылок на них было равным. Перейдем к вкладкам: каждая вкладка это отдельный DIV. У первого блока сразу добавлен класс is-active. Конечная разметка выглядит так:
На данном этапе в браузере будет просто куча элементов в одном ряду, но мы это поправим в CSS.
Добавляем стили в CSS
Замечание: я использую flexbox, для автоматической генерации вендорных префиксов autoprefixer с Gulp. В CSS ниже я не писал вендорные префиксы. Если вам нужна готовая версия, она есть на GitHub. Блоки c-tabs как таковых стилей не требуют, так что начнем с меню. Меню у нас состоит из набора ссылок, ниже я добавил немного стилей:
Пройдемся по стилям меню. Основной контейнер это элемент flexbox с классом c-tabs-nav. Каждая ссылка это резиновый элемент с классом c-tabs-nav__link, который растягивается так, чтобы вместить все элементы с небольшими отступами между ссылок. На каждую ссылку вешается событие клика для переключения между вкладок. Также ссылки будут менять свое состояние в зависимости от того, навели на них мышку или кликнули. В демо у каждой ссылки своя иконка и текст в тегах I и span соответственно. На маленьких экранах текст в span скрывается для экономии места. Сделать это можно простым медиа запросом, который мы добавим в конец файла.
Теперь рассмотрим стили для конкретной вкладки:
Ну тут все просто и интуитивно понятно, но все же пройдемся поэтапно. Каждому табу присвоен класс c-tab, все вкладки спрятаны по умолчанию (display: none). Если к элементу добавляется класс is-active, то значение свойства display меняется на block. Класс c-tab__content отвечает за область контента внутри вкладки, функциональной нагрузки он не несет. Хотя через него можно напрямую обращаться ко вкладкам, не трогая основной контейнер.
На данном этапе у вас на экране уже должно быть что-то привлекательное. Но по клику по ссылкам меню ничего не происходит! Без паники, сейчас исправим.
Вдохнем жизнь при помощи JS
Давайте поэтапно распишем, чего мы хотим добиться с помощью JS:
Нам необходимо каким-то образом найти компоненты, чтобы потом их настроить
Нужно как-то инициализировать компоненты
Необходимо проверить, на все ли вкладки навешены обработчики события
Нам нужен метод для перехода к указанной вкладке, который можно вызывать как внутри, так и из разметки
И в конце концов, нужно получить доступ к нашим компонентам, т.е. необходимо добавить их в глобальное пространство имен
Теперь настроим нашу функцию и сделаем ее глобальной:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Обратите внимание, что функция tabs принимает один аргумент option. Добавим пару переменных в кэш, сделав их доступными для следующей нашей функции:
Мы инициализировали пять переменных:
El – содержит элемент, найденный по селектору через option
tabNavigationLinks – коллекция ссылок меню с определенным классом, полученных через option
tabContentContainers – контент вкладок с определенными классами, полученный через option
activeIndex – индекс активной вкладки, по умолчанию равен 0
initCalled – булево значение, по умолчание равно false. Используется для проверки, вызывалась ли функция init, т.к. более одного раза данную функцию вызывать не нужно.
Подумаем дальше. Нам нужна какая-то функция, которая будет пробегаться по всем ссылкам вкладок и вешать на них обработчики событий, а также удалять класс no-js. И, естественно, нужна функция для обработки этих событий. И, наконец, нужна функция, которая будет переключать нас на заданную вкладку по ее индексу, которая будет вызываться из функции обработчика. Забегая наперед, нам нужно сделать так, чтобы функцию инициализации и функцию по переходу на конкретную вкладку можно было вызывать в любом месте. Благодаря нашему JS и переменной initCalled со значением по умолчанию false, мы можем быстро вернуться из любой функции обратно в инициализатор. Ниже представлен код:
Простые табы для сайта на jQuery, бывает еще проще?
без использования хэшей,
Текущий вариант реализации:
А можно сделать CSS лаконичнее?
Демо, которое можно форкать.
За ссылки с href=# надо отрывать руки. Что это за ссылка, которая никуда не ведет? Далее, при отключенном яваскрипте у вас будет пустая страница. далее, зачем тянуть 150-Кб тяжелый фреймворк, от которого айфон подвисает, ради табов?
Далее. Вот у вас написано
Что, если внутри сождержимого таба есть еще дивы? А если внутри таба есть еще один блок табов? А?
Далее, а что если табов больше 3-х?
Сделано на троечку, на уровне школьника, который впервые прочел сайт htmlbook.ru и захотел что-то сотворить. С кучей ошибок. Плохо, короче говоря.
И что значит «без использования хешей»? Это почему еще?
К слову, табы можно сделать вообще без яваскрипта, но вам видимо еще до этого далеко. Также, верстку табов можно сделать семантичнее — погуглите, у Сергея Чикуенка была статья на эту тему.
> А можно сделать CSS лаконичнее?
Его вообще можно убрать.
За ссылки с href=# надо отрывать руки.
и да, про селектор верно — стоило бы использовать, указывающий на прямых детей:
> стоило бы использовать, указывающий на прямых детей:
А еще хак для его эмуляции в Ие6 с 2 звездочками 🙂 (хотя мне конечно страшно такие хаки юзать, говорят, звездочка тормозит, а 2 звездочки вообще старичка ИЕ могут наверно уронить).
>За ссылки с href=# надо отрывать руки.
Это не продакшн код, это ПРИМЕР, вам больше нравится href=»javascript:;»?
>Что, если внутри сождержимого таба есть еще дивы?
Добавлю сверху класс tab_item и напишу
#wrapper div.tab_item < display:none; >
#wrapper div
>зачем тянуть 150-Кб тяжелый фреймворк, от которого айфон подвисает, ради табов?
Я не собираюсь писать страницы для айфонов, мне от Jq нет смысла отказываться.
>А если внутри таба есть еще один блок табов?
Выкрутимся как-нибудь 🙂 Не собираюсь писать универсальное решение там, где это не нужно.
>Далее, а что если табов больше 3-х?
Да хоть 10, вот пример
>… на уровне школьника, который впервые прочел сайт htmlbook.ru и захотел что-то сотворить.
>С кучей ошибок. Плохо, короче говоря.
Спасибо, ваше мнение очень важно для меня. Приведите свое решение здесь.
>И что значит «без использования хешей»? Это почему еще?
я имел в виду анкоры (якоря), просто у меня анкоры используются для других задач.
> вообще без яваскрипта, но вам видимо еще до этого далеко
Куда уж мне 🙂
>А можно сделать CSS лаконичнее? Его вообще можно убрать
Отличная идея, верстальщик мне спасибо скажет 🙂
Tabs (табы) | CSS
CSS Tabs с переходом по клику
CSS Tabs, с переходом по щелчку
CSS табы с переходом по наведению курсора мышки. Результат изменения сохраняется
Если :hover заменить на :active, то будет самый чистый HTML код табов, где смена содержимого осуществляется нажатием на вкладку.
Меню вкладками, где смена блоков происходит при наведении мышки. Появляющееся поле не фиксируется и как только курсор уходит с формы, снова видимой становится первая часть
Для копирования текста используйте комбинацию клавиш CTRL+C.
Меню вкладками, где поле изначально скрыто. Появляется или при наведении, или по клику. Если щелкнуть вне меню, то оно свернётся.
165 комментариев:
Протестировала, всё работает, даже в Опера.Мини. RusyLev Очень интересный обзор, на некоторых своих сайтах именно ваши табы и использую.
Но возник вопрос, как можно модифицировать 1-ый пример табов, чтобы сами табы были слева?
Пример: https://dl.dropboxusercontent.com/u/1104627/articles/CSS/vertical_tabs/index.html RusyLev или как здесь http://www.slotvoyager.com/list/videopokers/games/videopokerama NMitra Дополнила статью ещё одним примером Rusylev Браво! Огромное спасибо! Rusylev поставил на сайт, попытался вставить изображения в табы, но что-то ничего не выходит толкового. Невозможно настроить отступ снизу от картинок, они налазят друг на друга.
В хроме (в мозиле рамка чуть меньше, чем в хроме. Хорошо), всё отлично, к большому удивления в Яндекс браузере рамка на четверть текста, в ИЕ и в Опере тоже самое, а вот в Опере-мини отображает коректно.
Подскажите пожалуйста, как это решить?
ЯПлакать. Анонимный Забыл представиться, Михаил. NMitra height: 209px; заменить на height: 339px; Анонимный NMitra, вы прелесть и 41 раз умница! Большое Вам спасибо
Михаил Анонимный Здравствуйте. Подскажите пожалуйста, как в четвёртом примере добавить ещё span (колонки). У меня нарушается порядок их перехода или не работает вовсе.
Спасибо. NMitra Здравствуйте
.korpus
.korpus label
.korpus input[type=»radio»]:checked + label
.korpus > input:nth-of-type(1):checked
div:nth-of-type(3)
не подскажете, почему не получается 4-й вариант сделать с 6-ю вкладками?
.korpus1 > span + span:hover + span + span + span + span
div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span
div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span
div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span
div:nth-of-type(5),
.korpus1 > span + span + span + span + span + span:hover
.korpus1 > span:hover + span + span + span + span + span
div:nth-of-type(2),
.korpus1 > span:hover + span + span + span + span + span
div:nth-of-type(3),
.korpus1 > span:hover + span + span + span + span + span
div:nth-of-type(4),
.korpus1 > span:hover + span + span + span + span + span
div:nth-of-type(5),
.korpus1 > span:hover + span + span + span + span + span
.korpus1 > span + span:hover + span + span + span + span
div:nth-of-type(3),
.korpus1 > span + span:hover + span + span + span + span
div:nth-of-type(4),
.korpus1 > span + span:hover + span + span + span + span
div:nth-of-type(5),
.korpus1 > span + span:hover + span + span + span + span
.korpus1 > span + span + span:hover + span + span + span
div:nth-of-type(2),
.korpus1 > span + span + span:hover + span + span + span
div:nth-of-type(4),
.korpus1 > span + span + span:hover + span + span + span
div:nth-of-type(5),
.korpus1 > span + span + span:hover + span + span + span
.korpus1 > span + span + span + span:hover + span + span
div:nth-of-type(2),
.korpus1 > span + span + span + span:hover + span + span
div:nth-of-type(3),
.korpus1 > span + span + span + span:hover + span + span
div:nth-of-type(5),
.korpus1 > span + span + span + span:hover + span + span
.korpus1 > span + span + span + span + span:hover + span
div:nth-of-type(2),
.korpus1 > span + span + span + span + span:hover + span
div:nth-of-type(3),
.korpus1 > span + span + span + span + span:hover + span
div:nth-of-type(4),
.korpus1 > span + span + span + span + span:hover + span
.korpus1 > span + span + span + span + span + span:hover
div:nth-of-type(2),
.korpus1 > span + span + span + span + span + span:hover
div:nth-of-type(3),
.korpus1 > span + span + span + span + span + span:hover
div:nth-of-type(4),
.korpus1 > span + span + span + span + span + span:hover
NMitra Рабочий вариант:
Заранее благодарю за внимание. Денис Демин жду ответа. Еще раз спасибо. 🙂 NMitra Здравствуйте, так и размещайте 🙂 Александра Помойницкая Добрый день! Подскажите, пожалуйста, как сделать, чтобы в примере номер 1 при загрузке, верхней была вторая вкладка, а не первая. В вашем примере сейчас CSS верхняя, а как сделать, чтобы HTML была верхней? Спасибо! NMitra Добрый день. checked=»checked» нужно убрать из
и поставить в
Александра Помойницкая Спасибо огромнейшее. maritca Добрый день, не работает в ИЕ и Сафари. вкладки просто не переключаются. NMitra Добрый день. Все последние версии браузеров поддерживают. Проблема может быть у старых версий, не поддерживающих селекторы. MarQs Li Потрясающе!
Поломал немного голову над четвертым вар. с семью вкладками, но оно того стоило, автор логику изложил отлично.
СПАСИБО! Анонимный не работает первый пример в IE 6 как можно сделать чтобы заработало? NMitra Увы, это невозможно. В IE6 подобные вещи делаются только с участием JavaScript Анонимный а не подскажите какой скрипт нужно вставить для корректной работы? Заранее благодарен Анонимный а не подскажите какой скрипт нужно вставить для корректной работы? Заранее благодарен NMitra Что-то типа такого http://shpargalkablog.ru/2011/01/forma-s-vkladkami.html Хотя в IE не проверяла Анонимный а куда прописывается этот скрипт для примера 1? 🙂 NMitra Лучше измените CSS этого http://shpargalkablog.ru/2011/01/forma-s-vkladkami.html Анонимный дело в том что сверстано уже не одна страница по примеру один и нужно как-то исправить этот БАГ 🙁 NMitra Подумаю NMitra Противный IE6, там вроде нужно будет всем прописывать id. Пробуйте:
Анонимный Прошу прощения за мою наглость и за чайничество 🙂 Вот к примеру страничка http://compol.ru/linoleum/travertine.php куда тут нужно дописать этот скрипт?) везде нормально показывает а на 6 версии как и описал выше не корректно NMitra Сначала попробуйте после
NMitra Я ещё раз проверила на IE, всё работает. У вас не работают примеры именно с моей страницы или когда вы добавляете их на свой сайт? Используете Windows? Александра Помойницкая Добрый вечер! Подскажите пожалуйста как сделать первый вариант с 9-ью вкладками.
так прописала и ничего не работает..просто все 9 дивов в столбик выстроились.
Подскажите пожалуйста как прописать. Спасибо. NMitra
div:nth-of-type(3) < display: block; padding: 5px; border: 1px solid #aaa; >NMitra См. комментарий 65 Денис Здравствуйте, NMitra. Подскажите пожалуйста как сделать 3-й вариант с 25 вкладками, а то я уже 3-й день мучаюсь, всё никак не получается ( NMitra
NMitra Чтобы в IE работало
.menu1 > a,
.menu1 #tab2:target
#tab2,
#tab3,
.menu1 > div,
.menu1 #tab2:target
.menu1 > div:nth-of-type(1),
.menu1 #tab2:target
.menu1 > a:nth-of-type(1),
.menu1 #tab2:target
Как тут добавить вкладки
NMitra См http://jsfiddle.net/NMitra/jxwkrabq/ Анонимный Спасибо. Помогите в 3-ем примере сделать вертикальные табы. NMitra Какой именно вариант, там где написано «Реализация попроще «? Влад «Реализация попроще». Да. Будьте добры. «Помогите в 3-ем примере сделать вертикальные табы.» NMitra HTML тот же, а CSS (см. http://jsfiddle.net/NMitra/5znb1ok0/ )
a:nth-of-type(3) < background: green; >Анонимный Здравствуйте. А как в третьем варианте зафиксировать выбранную вкладку, чтобы после перезагрузки страницы, она оставалась выбранной? NMitra Здравствуйте, тот, который при наведении курсора мышки? Анонимный То есть второй, там где по клику. Анонимный Или так получится только, если через инпуты делать? NMitra Попробуйте добавить скрипт
div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked
div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked
Вот картинки, иллюстрирующие это:
http://i71.fastpic.ru/big/2015/0520/9d/0c7e30bff1267a0613611e8d641b3a9d.jpg
http://i71.fastpic.ru/big/2015/0520/36/f40cf2603d8964fdcb74898d9e3ee836.jpg
http://i71.fastpic.ru/big/2015/0520/5c/d6b58e1ad8d84b8b564129e688b2d15c.jpg
Помогите, пожалуйста, уже голову сломал, не могу понять почему так происходит. NMitra label вкладок нужно присвоить класс и в коде только этому классу присваивать значения или (не для IE7-) перед label поставить символ > (см. http://shpargalkablog.ru/2011/10/css-selectors.html). Пример http://jsfiddle.net/NMitra/6fnkaafz/
.korpus0 > label <> Александр Все именно так и сделано:
Сорри, сюда код запостить не смог, html-теги не пропускает. Положил нужную часть сюда:
http://jsfiddle.net/Gealut/j4p58wr4/
Но вы можете использовать любой, убрав стили для первой вкладки, например, http://jsfiddle.net/f8c8rzbd/ Вопрос только в том, как он будет сворачиваться при ненадобности.
Или нужно смотреть в сторону JS. Муслим Гасанов Спасибо. А есть возможность использовать каскадом? Чтобы открыли по клику, потом еще и еще и еще и до скончания. )) Что-то типа таб внутри таба как-то не выходит(. NMitra Можно, но, увы, у меня не так много свободного времени. Посмотрите пример тут http://jsfiddle.net/NMitra/5uarcff5/ ( http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html ) или проще воспользуйтесь тегом details http://shpargalkablog.ru/2013/04/details-html.html Муслим Гасанов Спасибо Анонимный а вот во 2-м варианте (CSS Tabs, с переходом по щелчку) реально ли как то поставить ширину вкладки в пикселях?) под текст ширина вкладки легко самоподстраивается, а вот когда на странице 2 вкладки, смотрится не очень красиво(( Анонимный под шириной вкладки я имел ввиду, чтоб кнопку (к примеру tab1) по ширине зафиксировать в пикселях. NMitra Так?
Вопрос №1. Как сделать матрешку из вкладок с этим кодом (ссылка выше)? а то пытался и бестолку(
На сайте хочу сделать одну огромную страницу, в которой приблизительно по прикидкам в сумме будет 24 вкладки. Указано в примере ниже.
Вопрос №2. Как сделать ширину для кнопок (т.е. у каждого слоя матрешки вкладок будет разная ширина, как про цвета написал ниже.), чтоб они подстраивались не только под размер текста, но и под ширину страницы.
Ширина страницы 830px, но для кнопок она должна быть 800px (т.е. чтоб небольшие отступы все же были от краев страницы; желательно, но не обязательно).
Хотя как вариант сделать в % размер кнопок, который и будет зависить от ширины страницы.
Вопрос №3. Как сделать разные цвета в разных слоях матрешки вкладок? Указано в примере ниже.
P.S. как вариант, можете добавить в саму статью про это, не думаю, что только у меня такие вопросы возникают или возникнут.
Пример:
1) профессия 1 Подразделяется на: [цвет1]
1.1) вкладка 1.1
1.2) вкладка 1.2 [цвет3; у этих 4 вкладок]
1.3) вкладка 1.3
1.4) вкладка 1.4
2) профессия 2 Подразделяется на: [цвет1]
2.1) вкладка 2.1 Подразделяется на: [цвет2]
2.1.1) вкладка 2.1.1
2.1.2) вкладка 2.1.2 [цвет3; у этих 4 вкладок]
2.1.3) вкладка 2.1.3
2.1.4) вкладка 2.1.4
2.2) вкладка 2.2 Подразделяется на: [цвет2]
2.2.1) вкладка 2.2.1
2.2.2) вкладка 2.2.2 [цвет3; у этих 4 вкладок]
2.2.3) вкладка 2.2.3
2.2.4) вкладка 2.2.4
3) профессия 3 Подразделяется на: [цвет1]
3.1) вкладка 3.1
3.2) вкладка 3.2
3.3) вкладка 3.3
3.4) вкладка 3.4 [цвет3; у этих 7 вкладок]
3.5) вкладка 3.5
3.6) вкладка 3.6
3.7) вкладка 3.7
4) профессия 4 Подразделяется на: [цвет1]
4.1) вкладка 4.1
4.2) вкладка 4.2
4.3) вкладка 4.3 [цвет3; у этих 5 вкладок]
4.4) вкладка 4.4
4.5) вкладка 4.5
5) профессия 5 Подразделяется на: [цвет1]
5.1) вкладка 5.1
5.2) вкладка 5.2 [цвет3; у этих 2 вкладок]
Анонимный Ах да, забыл.
br короче
Иначе будет прокручивать окно к id akula-z Здравствуйте!
Скажите, пожапуйста, как убрать рамку вокруг табов? NMitra Здравствуйте, какой именно вариант? Какая именно рамка, общая? Рамку делает свойство border: http://shpargalkablog.ru/2013/12/border.html akula-z Да, общая рамка, вокруг текста.
То есть, мне надо просто удалить border: http://shpargalkablog.ru/2013/12/border.html NMitra Верно, в нужном месте убрать border или border-top и т.п. sat Добавил табы по наведению в joomshopping, в карточку товара. Все работает отлично, но вкладки при открытии не растягивают страницу вниз, как было, когда стояли в коде, а выводят содержимое сверху. Подскажите, плиз, что сделать, чтобы было правильно? NMitra Покажите URL с кодом, возможно стили конфликтуют sat На компе делаю.Вот, на скорую руку, закинул http://satinternet.ru/explore/features/2013-04-03-13-04-04/shoping/product/view/9/1 NMitra Обёртку сделайте внутри div с
overflow: auto;
height: 208px; /* ваша высота */ sat То есть, весь это код таба обернуть?
NMitra Нет, внутри div, например, не
sat Спасибо, получилось. Извиняюсь за дерзость)), а есть столь же простой вариант, чтобы без прокрутки? NMitra Предыдущий комментарий не к той статье написала 🙂
Увеличьте высоту height: 300px;
В CSS:
#raz < /* корпус */
position: relative;
height: 300px; /* корпус */
border-top: 30px solid #fff;
>
Лёха
слэш в конце это пережиток Doctype XHTML1.0
в html5 не нужен он