Как дать прямую ссылку на одну из вкладок табов?

Question

Есть страница с вкладками. Как мне сделать внешнюю ссылку на вторую или третью вкладку? Через якорь не получается, все равно открывается первая вкладка.

$('ul.structure__tabs').on('click', 'li:not(.structure__tab_active)', function() {
  $(this)
    .addClass('structure__tab_active')
    .siblings()
    .removeClass('structure__tab_active')
    .closest('div.structure')
    .find('div.structure__content')
    .removeClass('structure__content_active')
    .eq($(this).index())
    .addClass('structure__content_active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="structure">
  <ul class="structure__tabs">
    <li class="structure__tab structure__tab_active"><span>Шахматы в школе</span> </li>
    <li class="structure__tab"><span>Шахматы в университетах</span></li>
    <li class="structure__tab"><span>Шахматы в десткие дома</span></li>
  </ul>

  <div id="chessinschool" class="structure__content structure__content_active">Шахматы в школе</div>
  <div id="chessinuniver" class="structure__content">Шахматы в университетех</div>
  <div id="chessinchildhouse" class="structure__content">Шахматы в детские дома</div>
</div>

Answer 1

console.log( window.location );

Хранит всю необходимую информацию про текущий адрес. В частности, можно записывать / считывать данные через window.location.hash:

openTabFromURL();

$('ul.structure__tabs').on('click', 'li:not(.structure__tab_active)', function() {
  var index = $(this).index();
  
  openTab(index, 'ul li.structure__tab');
  setLocationHash(index);
  
  /***/
  
  function setLocationHash(i) {
    var hash = window.location.hash;
    
    if( /js-tab-\d+;/.test(hash) ) {
      window.location.hash = hash.replace(/js-tab-(\d+);/, "js-tab-" + i + ";");
    } else {
      window.location.hash = "js-tab-" + i + ";" + hash.replace(/#/, "");
    }
  }
});

function openTab(index, selector) {
  $(selector).eq( index ).addClass('structure__tab_active')
    .siblings().removeClass('structure__tab_active')
    .closest('div.structure').find('div.structure__content')
    .removeClass('structure__content_active')
    .eq( index ).addClass('structure__content_active');
}

function openTabFromURL() {
  var index = window.location.hash.match(/js-tab-(\d+)/);
  if( !index ) return;
  
  index = Number( index[1] );  
  openTab(index, 'ul li.structure__tab');
}

.structure__tab { cursor: pointer; }
.structure__tab_active {
  color: red;
}

.structure__content {
  display: none;
}

.structure__content.structure__content_active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="structure">
  <ul class="structure__tabs">
    <li class="structure__tab structure__tab_active"><span>Шахматы в школе</span> </li>
    <li class="structure__tab"><span>Шахматы в университетах</span></li>
    <li class="structure__tab"><span>Шахматы в десткие дома</span></li>
  </ul>

  <div class="structure__content structure__content_active">Шахматы в школе</div>
  <div class="structure__content">Шахматы в университетех</div>
  <div class="structure__content">Шахматы в детские дома</div>
</div>

.match(/js-tab-(\d+)/) — Кракозябра называется «Регулярные выражения»

\d от слова digit, ищет совпадение с цифрами от 0 до 9. + означает один или много раз (на случай, если вкладок будет больше десяти).

БЛОГ НА HUSL

Как дать прямую ссылку на одну из вкладок табов?

Ответы (1 шт):