Книга: Выразительный JavaScript

Закладки

Закладки

Интерфейс закладок встречается часто. Он позволяет вам выбирать панель интерфейса, выбирая одну из нескольких торчащих закладок над элементом.

В упражнении вам нужно сделать простой интерфейс закладок. Напишите функцию asTabs, которая принимает узел DOM, и создаёт закладочный интерфейс, показывая дочерние элементы этого узла. Ей нужно вставлять список элементов <button> вверху узла, по одному на каждый дочерний элемент, содержащих текст, полученный из атрибута data-tabname. Все, кроме одного из дочерних элементов, должны быть спрятаны (при помощи display stylenone), а текущий видимый узел можно выбирать нажатием кнопки.

Когда оно заработает, расширьте функционал, чтобы у текущей активной кнопки был свой стиль.

<div>
  <div data-tabname="one">Закладка один</div>
  <div data-tabname="two">Закладка два</div>
  <div data-tabname="three">Закладка три</div>
</div>
<script>
  function asTabs(node) {
    // Ваш код.
  }
  asTabs(document.querySelector("#wrapper"));
</script>

Оглавление книги