Advertisement
  1. Web Design
  2. Bootstrap 4

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

Scroll to top
Read Time: 4 min

() translation by (you can also view the original English article)

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

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


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

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

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

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

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="utf-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
7
    <!-- custom CSS -->
8
    <link rel="stylesheet" href="css/main.css">
9
    <title>How to Add Deep Linking to the Bootstrap 4 Tabs Component</title>
10
  </head>
11
  <body>
12
    <!-- content here -->
13
    
14
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
15
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
16
    <!-- custom JS -->
17
    <script src="js/main.js"></script>
18
  </body>
19
</html>

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

1
<ul class="nav nav-mytabs" id="myTab" role="tablist">
2
  <li class="nav-item">
3
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
4
  </li>
5
  <li class="nav-item">
6
    <a class="nav-link" id="history-tab" data-toggle="tab" href="#history" role="tab" aria-controls="history" aria-selected="false">History</a>
7
  </li>
8
  <li class="nav-item">
9
    <a class="nav-link" id="city-attractions-tab" data-toggle="tab" href="#city-attractions" role="tab" aria-controls="city-attractions" aria-selected="false">City Attractions</a>
10
  </li>
11
</ul>
12
<div class="tab-content mytab-content" id="myTabContent">
13
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
14
    <!-- content here -->
15
  </div>
16
  <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
17
    <!-- content here -->
18
  </div>
19
  <div class="tab-pane fade" id="city-attractions" role="tabpanel" aria-labelledby="city-attractions-tab">
20
    <!-- content here -->
21
  </div>
22
</div>

2. CSS

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

Вот они:

1
.nav-mytabs {
2
  margin-top: 2rem;
3
}
4
5
.nav-mytabs li:not(:last-child) {
6
  margin-right: 7px;
7
}
8
9
.nav-mytabs a {
10
  position: relative;
11
  top: 4px;
12
  padding: 10px 25px;
13
  border-radius: 2px 2px 0 0;
14
  background: white;
15
  color: black;
16
  opacity: 0.7;
17
  transition: all 0.1s ease-in-out;
18
}
19
20
.nav-mytabs a.active, 
21
.nav-mytabs a:hover {
22
  opacity: 1;
23
  top: 0;
24
}
25
26
.mytab-content {
27
  position: relative;
28
  z-index: 2;
29
  padding: 25px;
30
  border-radius: 0 4px 4px 4px;
31
  background: white;
32
}

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 код, который об этом всем позаботится:

1
$(document).ready(() => {
2
  let url = location.href.replace(/\/$/, "");
3
4
  if (location.hash) {
5
    const hash = url.split("#");
6
    $('#myTab a[href="#'+hash[1]+'"]').tab("show");
7
    url = location.href.replace(/\/#/, "#");
8
    history.replaceState(null, null, url);
9
    setTimeout(() => {
10
      $(window).scrollTop(0);
11
    }, 400);
12
  } 
13
  
14
  $('a[data-toggle="tab"]').on("click", function() {
15
    let newUrl;
16
    const hash = $(this).attr("href");
17
    if(hash == "#home") {
18
      newUrl = url.split("#")[0];
19
    } else {
20
      newUrl = url.split("#")[0] + hash;
21
    }
22
    newUrl += "/";
23
    history.replaceState(null, null, newUrl);
24
  });
25
});

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

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

Заключение

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

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

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


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.