Как создать якорь на табах bootstrap?
Как создать якорь на табах bootstrap?
1 ответ
от
richard ,
6 месяцев назад
@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.
15