0

У меня етсь bootstrap tabs. И как написано в исходом коде bootstrap при переключении между табами нет якоря в адресной строке.

Как не испортив дефолтный код bootstrap tabs добавить в него и якори.

К примеру есть вот такой код.

<div class="tabs_green">
  <ul class="nav nav-tabs" role="tablist">
    <li class="tab100 active">
      <a href="#tab2" rel="nofollow" aria-controls="profile" role="tab2" data-toggle="tab">TAB 1</a>
    </li>
    <li>
      <a href="#tab2" rel="nofollow" aria-controls="profile" role="tab2" data-toggle="tab">TAB 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tab1">
      CONTENT 1
    </div>
    <div role="tabpanel" class="tab-pane" id="tab2">
      CONTENT 2
    </div>
  </div>
</div>

Нужно что бы кода например в адресной строке написано example.com#tab1 то активным сделать первый если второй то второй.

Но так что бы исходный код клика bootstrap tabs работало как раньше.

1 ответ 1

2

Суть примерно следующая - при загрузке страницы проверяется указано ли в адресе значение #... и если указано - то выбирается таб с такой ссылкой и для него выполняется событие 'click', т.е. мы как бы нажимаем на него.

$(window).load(function(){
  if(window.location.hash){
    $('a[href="'+window.location.hash+'"]').trigger('click');
  }
});

$(document).on('click', 'a[data-toggle="tab"]', function(){
  window.location.hash = $(this).attr('href');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs_green">
  <ul class="nav nav-tabs" role="tablist">
    <li class="tab100 active">
      <a href="#tab2" rel="nofollow" aria-controls="profile" role="tab2" data-toggle="tab">TAB 1</a>
    </li>
    <li>
      <a href="#tab2" rel="nofollow" aria-controls="profile" role="tab2" data-toggle="tab">TAB 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tab1">
      CONTENT 1
    </div>
    <div role="tabpanel" class="tab-pane" id="tab2">
      CONTENT 2
    </div>
  </div>
</div>

2
  • примерно то что нужно, но при переключении якорь не меняется 29 ноя 2017 в 10:30
  • @RazmikGalstyan Попробуйте теперь, добавил событие - при клике на таб в адрес строки добавляется соответствующий хеш 29 ноя 2017 в 10:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.