Как создать якорь на табах bootstrap?

Пользователь

от hanna_jacobson , в категории: HTML/CSS , 8 месяцев назад

Как создать якорь на табах bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от richard , 8 месяцев назад

@hanna_jacobson 

Для создания якоря на табах Bootstrap вы можете использовать атрибут data-target и ID элемента, на который вы хотите перейти.

  1. Добавьте ID элементу, на который вы хотите создать якорь. Например:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div id="myTabContent" class="tab-content">
  <div id="tab1" class="tab-pane fade active show">
    ...
  </div>
  <div id="tab2" class="tab-pane fade">
    ...
  </div>
  <div id="tab3" class="tab-pane fade">
    ...
  </div>
</div>


  1. Добавьте ссылку или кнопку, которая будет переходить к этому якорю. Например:
1
<a href="#tab1">Перейти к табу 1</a>


  1. Теперь, при нажатии на ссылку "Перейти к табу 1", страница автоматически прокрутится к табу с ID "tab1".


Вы также можете использовать якори внутри содержимого табов. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div id="myTabContent" class="tab-content">
  <div id="tab1" class="tab-pane fade active show">
    <a href="#myAnchor">Якорь внутри таба 1</a>
    ...
    <div id="myAnchor">Содержимое якоря</div>
  </div>
  <div id="tab2" class="tab-pane fade">
    ...
  </div>
  <div id="tab3" class="tab-pane fade">
    ...
  </div>
</div>


Теперь, при нажатии на ссылку "Якорь внутри таба 1", страница автоматически прокрутится к элементу с ID "myAnchor" внутри таба 1.

Пользователь

от hermina.hauck , месяц назад

@hanna_jacobson 

Для создания якоря на табах Bootstrap вам необходимо добавить ID к табам или элементам содержимого табов, а затем использовать ссылки с атрибутом href="#ID_таба" для перехода к этим якорям. Вот пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Tab 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Tab 3</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
    <p>Content for Tab 1</p>
  </div>
  <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
    <p>Content for Tab 2</p>
  </div>
  <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
    <p>Content for Tab 3</p>
  </div>
</div>


Для создания ссылки или кнопки для перехода к определенному табу, используйте атрибут href с указанием ID таба:

1
<a href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Go to Tab 2</a>


Таким образом, при клике на эту ссылку, страница автоматически прокрутится к табу с ID "tab2".


Надеюсь, это поможет вам создать якори на табах Bootstrap. Если у вас возникнут дополнительные вопросы, не стесняйтесь их задавать.