JS, HTML, CSS: TabControl без JQuery или реализуем вкладки без подручных средств

Дата: . Автор:

Сегодня речь пойдет о реализации вкладок. Мы отбросим такое модное слово как JQuery и вернемся с старому доброму «чистому» программированию, без использования кучи библиотек. Все что нам нужно — CSS, JavaScript и HTML.

Главное, я постараюсь максимально подробно описать все действия, которые буду производить.
Как всегда для начала создадим пустой HTML шаблон:

<html>
  <head>
  </head>
  <body>
  </body>
</html>

Теперь сделаем заготовку наших вкладок. По своей сути ТабКонтрол состоит из двух частей. Первая — это поименованные вкладки. Вторая — содержание той или иной вкладки. По сути вкладки — это список, поэтому для их реализации подойдет такой элемент как ul. В качестве контейнера для содержания вкладки вполне подойдет элемент div.
Реализуем TabControl с тремя вкладками на HTML. Сразу учтем тот факт, что никаких дополнительных библиотек мы использовать не будем, поэтому основные элементы обязательно должны иметь идентификаторы id. Так же сразу учтем тот факт, что мы будем использовать CSS и для этого сразу назначим основным элементам классы. Имеем:

<ul id="tabs-title">
    <li id="tab-title1" class="tab-title selected-li">Первая вкладка</li>
    <li id="tab-title2" class="tab-title">Вторая вкладка</li>
    <li id="tab-title3" class="tab-title">Третья вкладка</li>
</ul>
<div id="tabs">
    <div class="tab selected" id="tab1">
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    </div>
    <div class="tab" id="tab2">
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    </div>
    <div class="tab" id="tab3">
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    </div>
</div>

Как видно, элементы, которые играю одну и ту же роль, имеют одни и те же названия классов. Это вполне логично, так как выглядеть они должны абсолютно одинаково. Единственное различие, что два элемента имеют сразу два класса (пишутся через пробел). По названию второго класса, можно догадаться, что он будет отвечать за выбранную вкладку. Таким образом, указав сразу два класса, мы просто выбрали вкладку, которая будет открыта сразу после загрузки страницы.

Если сейчас посмотреть на страницу, то выглядеть это будет страшновато, необходимо прописать соответствующие стили:

#tabs, #tabs-title { //элементы с id=tabs и id=tabs-title
 padding: 0px; //Нет отступов внутри тега
 margin: 0px; //Нет отступов снаружи тега
 clear: both; //С новой строки
 width: 370px; //Ширина 367 пикселей
 border: 1px solid #000; //С черной рамкой в 1 пиксель
}
.tab-title { //Элементы с class=tab-title
 cursor: pointer; //Курсор в виде пальца
 background: #AAA; //Фон темно-серый
 margin-right: 10px; //Справа от элемента отступ в 10 пикселей
 padding: 0 5px; //Внутри элемента отступы справа и слева в 5 пикселей
 list-style: none; //Убираем точки у li
 float: left; //Делаем так что бы li располагались горизонтально
}
.tab { //Элементы с class=tab 
 padding: 10px; //Внутренний отступ в 10 пикселей
 display: none; //Не показываем
 background: #CCC; //Светло-серый фон
 text-align: justify; //Выравниваем текст по ширине элемента
}
.selected { //Элементы с class=selected 
 display: block; //Показываем элемент
} 
.selected-li, #tabs-title li:hover { //Элементы с class=selected-li и при наведении на тег li внутри элемента с id=tabs-title 
 background: #CCC; //Светло-серый фон 
} 
#tabs-title { //Элементы с id=tabs-title 
 background: #AAA; //Фон темно-серый
 height: 20px; //Высота 20 пикселей
}

Если сейчас посмотреть на результат, то уже вырисовывается картина. Однако не работают вкладки. Для этого нужен простой скрипт, срабатывающий на нажатие по вкладке.
Наш скрипт будет принимать в качестве значения номер вкладки, далее он должен пробежать по всем вкладкам и расставить нужные стили. Имеем: 

 var tabCount = 3; //Всего вкладок
  function SelectTab(idx) { //idx - выбранная вкладка
    for (var i = 1; i <= tabCount; ++i)
    {
      var _tab = document.getElementById("tab"+i); //Div - содержимое вкладки i
      var _tabTitle = document.getElementById("tab-title"+i); //Li - вкладка i
      if (idx != i) { //Если это не выбранная вкладка
        _tab.setAttribute("class", "tab");
        _tabTitle.setAttribute("class", "tab-title");
      }
      else { //Если это выбранная вкладка
        _tab.setAttribute("class", "tab selected");
        _tabTitle.setAttribute("class", "tab-title selected-li");
      }
    }
  }

Вот и все. Теперь осталось только на вкладки повесить событие onclick с вызовом функции SelectTab и нужным параметром. В конечном итоге имеем:

<html>
  <head>
  <style>
  #tabs, #tabs-title { padding: 0px; margin: 0px; clear: both; width: 370px; border: 1px solid #000;}
  #tabs-title { background: #AAA; height: 20px; }
  .tab-title { cursor: pointer; background: #AAA; margin-right: 10px; padding: 0 5px; list-style: none; float: left; }
  .selected-li, #tabs-title li:hover { background: #CCC; }
  .tab { padding: 10px; display: none; background: #CCC; text-align: justify; }
  .selected { display: block; }
  </style>
  
  <script type="text/javascript">
  var tabCount = 3;
  function SelectTab(idx) {
    for (var i = 1; i <= tabCount; ++i)
    {
      var _tab = document.getElementById("tab"+i);
      var _tabTitle = document.getElementById("tab-title"+i);
      if (idx != i) {
        _tab.setAttribute("class", "tab");
        _tabTitle.setAttribute("class", "tab-title");
      }
      else {
        _tab.setAttribute("class", "tab selected");
        _tabTitle.setAttribute("class", "tab-title selected-li");
      }
    }
  }
  </script>
  
  </head>
  <body>

  <ul id="tabs-title">
    <li id="tab-title1" onclick="SelectTab(1);" class="tab-title selected-li">Первая вкладка</li>
    <li id="tab-title2" onclick="SelectTab(2);" class="tab-title">Вторая вкладка</li>
    <li id="tab-title3" onclick="SelectTab(3);" class="tab-title">Третья вкладка</li>
  </ul>
  <div id="tabs">
    <div class="tab selected" id="tab1">
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
    </div>
    <div class="tab" id="tab2">
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
    </div>
    <div class="tab" id="tab3">
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
    </div>
  </div>
  
  
  </body>
</html>

Результат работы:

  • Первая вкладка
  • Вторая вкладка
  • Третья вкладка
Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
Первая вкладка Первая вкладка Первая вкладка Первая вкладка Первая вкладка
Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка Вторая вкладка
Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка
Третья вкладка Третья вкладка Третья вкладка Третья вкладка Третья вкладка

Запись опубликована в рубрике HTML, JavaScript с метками , , , , , , , , , . Добавьте в закладки постоянную ссылку.