HTMLCSS

Табы без использования 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>

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

  • в браузере Konqueror 4.4.5 не работает (полагаю что и в других версиях этого браузера тоже);
  • если страница с прокруткой, то браузер будет также переходить к якорю, которым в нашем примере является div.content, что не всегда удобно;
  • при использование в реальных проектах лучше делать высоту с запасом, т.к. поведение в различных браузерах может отличаться (например с IE6 долго пришлось дружить высоту, когда она у меня была впритык почти).