Twitter Bootstrap открытие вкладки по якорю

Дата публикации: 10 11 2014 Автор: PazitiFF

Чтобы открыть вкладку по якорной ссылке в Twitter Bootstrap 3, можно воспользоваться следующим методом.

Создадим табы
<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#tab3" role="tab" data-toggle="tab">Messages</a></li>
</ul>
 
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="tab1">Tab 1</div>
  <div role="tabpanel" class="tab-pane" id="tab2">Tab 2</div>
  <div role="tabpanel" class="tab-pane" id="tab3">Tab 3</div>
</div>
Создадим скрипт и встаим его в html код страницы. Можно прямо в
<script>
$(document).ready(function () {
    var hash = window.location.hash;
    hash && $('ul.nav-tabs a[href="' + hash + '"]').tab('show');
});
</script>
Создадим ссылки на табы
<a href="/custompage#tab1">Link to tab 1</a>
<a href="/custompage#tab2">Link to tab 2</a>
<a href="/custompage#tab3">Link to tab 3</a>

Комментарии

Здравствуйте, попробовал ваш способ на HTML шаблоне бутстрапа v3.3.6 и оказалось что он не работает.

Скрипт работает. Спасибо!

Проверил, работает! Очень помогли данной заметкой! Скрипт должен быть написан после подключения jquery и bootstrap js

не работает

Спасибо! Bootstrap v3.3.7 прекрасно работает

Все работает отлично, но после принудительного обновления страницы. Если применить setTimeout('window.location.reload()'), то страница обновляется циклично.

Все решено. Внесла id="extra-tab" в строку вызова по ссылке и в скрипте изменила $("#extra-tab").click(function(). Все работает. Спасибо автору за отличный материал.

Спасибо. К слову, у меня заработало, когда я поставил приписку в теге скрипта <script type="text/javascript">

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Вы можете использовать подсветку исходного кода следующими тегами: <code>, <blockcode>, <apache>, <bash>, <css>, <drupal6>, <html5>, <javascript>, <mysql>, <php>.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.