Таблица с вкладками

[illmano]

Всем привет.
Захотел я использовать таблицу с переключающимися вкладками, как на этом сайте Для просмотра ссылки Войди или Зарегистрируйся но не могу найти шаблонов для таких таблиц или мануала с описанием как их сделать.
Кто подскажет материалы, генераторы или хотя бы как это называется, что бы я мог погуглить?

 

[01K]

Кличут его Multiple Drop Down Menus.
Вот скрин по названию, вторая картинка:
Для просмотра ссылки Войди или Зарегистрируйся

 

[Шумадан]

какое в сад меню?


Для просмотра ссылки Войди или Зарегистрируйся

 

[vipTelnet]

я использую это
Для просмотра ссылки Войди или Зарегистрируйся
стилевое оформление можно самому задать
а так же добавить во вкладки любой конент

 

[ugamer]

самый простой способ это использовать jquery, как советовал vipTelnet, а также стоит обратить внимание на bootstrap Для просмотра ссылки Войди или Зарегистрируйся , его сейчас часто используют, очень удобная штука

 

[illmano]

Не стал изобретать велосипед. Скопировал код вкладок со своего же сайта с карточки товаров (пример Для просмотра ссылки Войди или Зарегистрируйся).
Но не пойму почему верстка немного поехала, на странице на которую я вставил этот код Для просмотра ссылки Войди или Зарегистрируйся
Появился маркер списка и табы отображаются не совсем корректно, как на карточке товара.
Подскажите, какие параметры нужно подправить. Сижу уже 2й час и не могу найти.

 

[ugamer]

Не стал изобретать велосипед. Скопировал код вкладок со своего же сайта с карточки товаров (пример Для просмотра ссылки Войди или Зарегистрируйся).
Но не пойму почему верстка немного поехала, на странице на которую я вставил этот код Для просмотра ссылки Войди или Зарегистрируйся
Появился маркер списка и табы отображаются не совсем корректно, как на карточке товара.
Подскажите, какие параметры нужно подправить. Сижу уже 2й час и не могу найти.

В1. Там где поехала верстка всему виной class="wysiwyg-content" - или удалите или переименуйте его, если он конечно больше нигде не используется.

<div class="wysiwyg-content">
        <p>
    Мы готовы доставить ваш заказ в любой уголок России. Для работы с покупателями из Санкт-Петербурга мы предлагаем курьерскую доставку, для остальных городов &ndash; отправление через Почту России. <script src="/js/tabs.js" type="text/javascript"></script></p>

В2. Закомментируй/удали в стилях style.css

.wysiwyg-content ul {
margin: 5px 0 5px 40px;
}
.wysiwyg-content ul li {
background-image: none;
list-style-type: disc;
padding: 0;
}
.wysiwyg-content .form-field ul li {
list-style-type: none;
}

 

[illmano]

А разве оформление div табов не приоритетнее? Просто class="wysiwyg-content" используется на многих страницах. Его нельзя удалить.

 

[illmano]

Самым простым вариантом для меня оказалось прописать style="" сразу в тегах <li>. Но у левой стенки неактивного таба не прорисовывается граница. Подскажите что нужно еще прописать? Результат тут Для просмотра ссылки Войди или Зарегистрируйся

 

[vitalyx]

Я люблю пользоваться сервисом Для просмотра ссылки Войди или Зарегистрируйся там много исходников с примерами подобных задач, что же касается конкретно использования вкладок (табы) то вот ссылка Для просмотра ссылки Войди или Зарегистрируйся