Skip to content

Latest commit

 

History

History
 
 

tabs

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
components
components
 
 
css
css
 
 
i
i
 
 
res
res
 
 
README.md
README.md
 
 
index.html
index.html
 
 

README.md

Задача 2. Табы

В рамках домашнего задания к лекции «Асинхронные HTTP-запросы»

Описание

Реализуйте функционал переключения между вкладками с разным контентом. При клике на заголовок «Email» в окне необходимо отобразить форму подписки на email-рассылку. При клике на заголовок «SMS» нужно отобразить поле ввода телефона и кнопку Отправить код:

Интерфейс

Требования

  • Содержимое таба «Email» должно быть показано сразу при открытии страницы.
  • Содержимое табов нельзя помещать в основной файл вручную. Его необходимо получать асинхронным запросом при активации таба.
  • Текущий таб должен быть выделен. Одновременно может быть выбран только один таб.
  • Во время ожидания ответа и загрузки данных должен появляться индикатор загрузки.

Интерфейс

  • Заголовки табов реализованы тегами <a> в теге <nav>.
  • Адрес, по которому необходимо получить содержимое таба, нужно получить из атрибута href ссылки.
  • Переход по ссылке при клике на ней осуществляться не должен.
  • Содержимое активного таба необходимо поместить в тело тега <div id="content">.
  • Чтобы выделить активный таб, ему необходимо добавить класс active.
  • Индикатор загрузки реализован в теге <div id="preloader">.
  • Чтобы показать прелоадер, у него необходимо удалить класс hidden.

Реализация

В песочнице REPL.IT

В онлайн-песочнице на REPL.IT.

Локально с использованием git

В репозитории на GitHub.

Инструкция по выполнению домашнего задания

В онлайн-песочнице

Потребуется только ваш браузер.

  1. Открыть код в песочнице.
  2. Нажать кнопку «Fork».
  3. Выполнить задание.
  4. Нажать кнопку «Save».
  5. Нажать кнопку Share и скопировать ссылку из поля Share link.
  6. Прислать скопированную ссылку через личный кабинет на сайте netology.ru.

Локально

Потребуются: браузер, редактор кода, система контроля версий git, установленная локально, и аккаунт на GitHub или BitBucket.

  1. Клонировать репозиторий с домашними заданиями git clone https://github.com/netology-code/hj-homeworks.git.
  2. Перейти в папку задания cd hj-homeworks/xhr/tabs.
  3. Выполнить задание.
  4. Создать репозиторий на GitHub или BitBucket.
  5. Добавить репозиторий в проект git remote add homeworks %repo-url%, где %repo-url% — адрес созданного репозитория.
  6. Опубликовать код в репозиторий homeworks с помощью команды git push -u homeworks master.
  7. Прислать ссылку на репозиторий через личный кабинет на сайте netology.ru.