13.08.2015 Установка Sass 21.04.2015 Смена цвета SVG изображения на странице 21.04.2015 Смена цвета SVG изображения на странице 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 Замена стандартного ALERT с помощью JQUERY 30.10.2011 Модальное окно как вконтакте
#69

Табы без использования JavaScript, на css и html

Можно сделать табы без использования JavaScript, однако их работа  не всегда корректна, но обо всем по порядку.

JS, несомненно, является мощным инструментом, но код даже для создания табов без перезагрузки страниц становится достаточно объемным, также у многих пользователей он попросту выключен. Однако, есть элегантное решение подобных проблем, используя только CSS и HTML можно добиться результатов, при создании табов, не хуже чем с использованием JavaScript.

Итак сразу ПРИМЕР, чтобы вы могли убедиться в том что это действительно реально.

Технология создания подобных табов построена на якорях.

Создаются два div контейнера с различным содержимым внутри родительского, которому задаем через CSS фиксированную высоту (по желанию ширину) и свойству overflow задаем параметр hidden:

  1. div.tabcontents 
  2.  {
  3.       height: 300px;
  4.       overflow: hidden;
  5.  }

Контейнерам с контентом задаем следующие параметры:

  1. div.content 
  2.  {
  3.       height: 300px;
  4.       overflow: visible;
  5.  }

А сам код страницы будет следующим, где намеренно с помощью font выделены активные ссылки для конкретного таба:

  1. <div class="tabcontents">
  2. <div class="content" id="tab1"><a href="#tab1"><font color="red">Немного про JS</font></a>
  3.  <a href="#tab2">Табы без JS</a> 
  4.  <hr />
  5. <h2>Таб 1</h2>
  6. <p>текст таба 1</p>
  7. </div>
  8. <div class="content" id="tab2"><a href="#tab1">Немного про JS</a>
  9.  <a href="#tab2"><font color="red">Табы без JS</font></a> 
  10.  <hr />
  11. <h2>Таб 2</h2>
  12. <p>текст таба 2</p>
  13. </div>
  14. </div>

Также следует упомянуть о недостатках подобной технологии:


30.10.2011 Модальное окно как вконтакте 30.03.2011 Стилизация html button 30.03.2011 Стилизация html button 02.11.2011 Табы без использования JavaScript, на css и html 02.11.2011 Табы без использования JavaScript, на css и html 22.03.2011 HTML5 атрибут placeholder
О сайте