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

Тема в разделе "Верстка", создана пользователем illmano, 25 ноя 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. illmano

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    Всем привет.
    Захотел я использовать таблицу с переключающимися вкладками, как на этом сайте http://www.lamoda.ru/about/shipping/ но не могу найти шаблонов для таких таблиц или мануала с описанием как их сделать.
    Кто подскажет материалы, генераторы или хотя бы как это называется, что бы я мог погуглить?
     
  2. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    271
    Симпатии:
    40
  3. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.723
    Симпатии:
    2.097
    Последнее редактирование: 27 ноя 2013
    illmano нравится это.
  4. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    133
    Симпатии:
    11
    я использую это
    http://jqueryui.com/tabs/
    стилевое оформление можно самому задать
    а так же добавить во вкладки любой конент
     
    Шумадан и illmano нравится это.
  5. ugamer

    ugamer Постоялец

    Регистр.:
    30 ноя 2009
    Сообщения:
    60
    Симпатии:
    7
    самый простой способ это использовать jquery, как советовал vipTelnet, а также стоит обратить внимание на bootstrap http://getbootstrap.com/javascript/#tabs , его сейчас часто используют, очень удобная штука
     
  6. illmano

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    Не стал изобретать велосипед. Скопировал код вкладок со своего же сайта с карточки товаров (пример http://goo.gl/WuwcYW).
    Но не пойму почему верстка немного поехала, на странице на которую я вставил этот код http://goo.gl/f3Hm50
    Появился маркер списка и табы отображаются не совсем корректно, как на карточке товара.
    Подскажите, какие параметры нужно подправить. Сижу уже 2й час и не могу найти.
     
  7. ugamer

    ugamer Постоялец

    Регистр.:
    30 ноя 2009
    Сообщения:
    60
    Симпатии:
    7
    В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;
    }
     
  8. illmano

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    А разве оформление div табов не приоритетнее? Просто class="wysiwyg-content" используется на многих страницах. Его нельзя удалить.
     
  9. illmano

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    Самым простым вариантом для меня оказалось прописать style="" сразу в тегах <li>. Но у левой стенки неактивного таба не прорисовывается граница. Подскажите что нужно еще прописать? Результат тут http://goo.gl/f3Hm50
     
  10. vitalyx

    vitalyx Создатель

    Регистр.:
    16 май 2013
    Сообщения:
    15
    Симпатии:
    1