Как создать якорь на табах bootstrap?
Как создать якорь на табах bootstrap?
2 ответа
@hanna_jacobson
Для создания якоря на табах Bootstrap вы можете использовать атрибут data-target и ID элемента, на который вы хотите перейти.
- Добавьте 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
|
<a href="#tab1">Перейти к табу 1</a> |
- Теперь, при нажатии на ссылку "Перейти к табу 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.
@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. Если у вас возникнут дополнительные вопросы, не стесняйтесь их задавать.