Показать сообщение отдельно
  #1 (permalink)  
Старый 10.12.2017, 10:21
Аватар для stormur
Новичок на форуме
Отправить личное сообщение для stormur Посмотреть профиль Найти все сообщения от stormur
 
Регистрация: 09.12.2017
Сообщений: 6

табы с якорем (переключение вкладок)
Здравствуйте!

Использую своём проекте вкладки со следующей структурой и JS-кодом

<ul class="tabs">
  <li onclick="ChangeUrl('instances', '#instances');" class="active"><span>Instances</span></li>
  <li onclick="ChangeUrl('snapshots', '#snapshots');"><span>Snapshots</span></li>
  <li onclick="ChangeUrl('iso', '#iso');"><span>ISO</span></li>
</ul>

<div class="tabs-content active"> Контент 1 вкладки </div>
<div class="tabs-content"> Контент 2 вкладки </div>
<div class="tabs-content"> Контент 3 вкладки </div>


//Это код для табов
(function($) {
  $(function() {
    $('ul.tabs').on('click', 'li:not(.active)', function() {
      $(this).addClass('active').siblings().removeClass('active')
        .closest('div.center').find('div.tabs-content').removeClass('active').eq($(this).index()).addClass('active');
    });
  });
})($);

//А вот код для присвоения хэштега вкладке
function ChangeUrl(title, url) {
  var obj = {
    Title: title,
    Url: url
  };
  history.pushState(obj, obj.Title, obj.Url);
}


Теперь, собственно, проблема. Помогите, пожалуйста, по хэштегу в адресной строке переходить на необходимую вкладку. Имею в виду - если мне набрать вручную www.url.com/index.html#iso, то я попаду на соответствующую вкладку.

Спасибо!
Ответить с цитированием