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

[stormur]

Здравствуйте!

Использую своём проекте вкладки со следующей структурой и 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, то я попаду на соответствующую вкладку.

Спасибо!

[Nexus]

stormur,

<style>
.tabs li.active{
  text-decoration:underline;
}
.tabs-content{
  display:none;
}
.tabs-content.active{
  display:block;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="center">
  <ul class="tabs">
    <li data-tab-id="instances" class="active"><span>Instances</span></li>
    <li data-tab-id="snapshots"><span>Snapshots</span></li>
    <li data-tab-id="iso"><span>ISO</span></li>
  </ul>

  <div class="tabs-content active" data-tab-id="instances"> Контент 1 вкладки </div>
  <div class="tabs-content" data-tab-id="snapshots"> Контент 2 вкладки </div>
  <div class="tabs-content" data-tab-id="iso"> Контент 3 вкладки </div>
</div>
<script>
$(function() {
  $('ul.tabs').on('click', 'li:not(.active)', function() {
    var $t=$(this);
    $t.addClass('active').siblings().removeClass('active')
      .closest('div.center').find('div.tabs-content').removeClass('active').filter('[data-tab-id="'+$t.data('tab-id')+'"]').addClass('active');
      ChangeUrl($t.text(),'#'+$t.data('tab-id'));
  });
  
  if(location.hash.length)
  	$('.tabs [data-tab-id="'+location.hash.substr(1)+'"]').click();
});

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

[stormur]

Ваш код элегантен, Nexus, однако моего вопроса он не решает. Требуется именно переход на вкладку с помощью адресной строки и соответствующего хэштега. В любом случае, спасибо!

[рони]

stormur,
Nexus, вернётся и допишет строку 34, но попробуйте сами ...

[stormur]

намёк понял, попробую
но я пока очень слаб в JS, и на данный момент почти наугад всё делаю
чаще не получается, чем получается..

[рони]

stormur,
8 символов, нужно дописать или чуть больше

[Nexus]

stormur, в строке 34 нужно было дописать ".click()".

[stormur]

спасибо огромное
позволю себе наглость уточнить - как сделать так, чтобы переход через адресную строку по хэштегу на вкладку происходил в том числе при нажатии клавиши 'Enter'? (то есть я набираю www.url.com/index.html#iso, нажимаю 'Enter'..)

[Nik_Dev]

Доброго времени суток.
А возможно сделать открытие tab (вкладки) и переход к якорю?
Заранее благодарю

Имею якорь для комментариев вида: #comment-id-16.
Сделал tab c data-tab-id=#comment, но при переходе по #comment-id-16 переходит к комментарию только если вкладка #comment уже открыта.

ID для перехода по ссылке к комментарию формируется с помощью тега {id}

Возможно ли это реализовать? Подскажите пожалуйста. Буду благодарен.

Посмотреть можно тут

[j0hnik]

Nik_Dev,
https://www.youtube.com/watch?v=sAjA...hLeWwem&t=200s