Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Bootstrap 4
Webdesign

Как добавить ссылки вкладкам Bootstrap 4

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

Сегодня мы рассмотрим, как добавить якоря вкладкам (tabs) Bootstrap 4. Чтобы понять, что мы будем делать, ознакомьтесь с демо-страницей и обратите внимание на две вещи:

  1. Как меняется адрес страницы вместе с вашими кликами по вкладкам.
  2. Теперь, дав каждой вкладке свой адрес, ее содержимым можно делиться. Если скопировать адрес определенной вкладки и открыть ее в другом окне/браузере, то мы увидим, что откроется выбранная нами вкладка.


Обратите внимание на то, что адрес соответствует названию вкладки

Выделим три основных шага разработки; HTML, CSS и JavaScript. Должен заметить, что для дальнейшей работы необходимо хоть немного разбираться в каждом из них. Вам интересно, как мы это создадим? Если да, тогда приступим!

1. Создаем вкладки

Мы сразу начнем нашу работу с готового каркаса с сайта документации Bootstrap.

Чтобы сделать вкладки, возьмем пример кода вкладок, который представлен на сайте Bootstrap:

2. CSS

Затем мы зададим несколько CSS свойств нашим вкладкам. Ничего сложного, лишь основные стили. Стоит упомянуть, что в прошлом уроке мы использовали те же стили, чтобы создать собственные вкладки.

Вот они:

3. JavaScript

Когда наши HTML и CSS готовы, время заняться кодом JavaScript (это довольно важно).

Во-первых, когда DOM будет готов, мы простым выражением меняем ссылку страницы, убирая слэш в конце. Например, если адрес был something/,  то после наших действий он станет something.

Затем мы проверяем, содержит ли адрес страницы решетку (hash). Таким образом мы хотим сделать так, чтобы отображалось содержимое второй или третьей вкладки. Для этого:

  1. Мы возвращаем имя нужной нам вкладки и активируем ее, используя tab метод Bootstrap.
  2. Используем простое выражение, чтобы сгенерировать необходимый формат страницы.
  3. Обновляем адрес страницы без перезагрузки страницы, пользуясь методом replaceState.
  4. Дополнительно можно заставить страницу прокручиваться обратно к самому верху.

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

  1. Возвращается значение атрибута href для данной вкладки. В нашем случае возможны следующие варианты: #home, #history, #city-attractions.
  2. Проверяется значение атрибута, и в зависимости от результата, создается необходимый адрес страницы.
  3. Обновляется адрес страницы без ее перезагрузки при помощи метода replaceState.

Вот JavaScript код, который об этом всем позаботится:

4. Поддержка браузеров

Демо должно хорошо работать в современных браузерах. Для простоты, я не пользовался компиляторами JavaScript (например, Babel), но в вашем случае вам может это понадобиться.

Заключение

В этом уроке нам удалось поменять поведение вкладок Bootstrap, придав каждой из вкладок свое уникальное имя, делая содержимое вкладок более доступным. Имейте в виду, что процесс, который я показал, может быть применим к любому другому фреймворку или любым созданным вами лично вкладкам.

Если вы что-то не поняли, или что-то кажется вам непонятным, спрашивайте в комментариях!

Продолжите чтение


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.