Как перейти к нужному табу с другой страницы?

Question

[L1nw0od]

Здравствуйте, использую табы бутстрапа, и возникла задача, (как сделать не знаю, все что можно уже перепробовал не работает) ((
Есть ссылка на главной странице - при клике должен попасть на другую страницу где будет открыт нужный мне таб.
Это мои табы с той страницы

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#panel1">Панель 1</a></li>
  <li><a data-toggle="tab" href="#panel2">Панель 2</a></li>
  <li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
      Другие панели 
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a data-toggle="tab" href="#panel3">Панель 3</a></li>
      <li><a data-toggle="tab" href="#panel4">Панель 4</a></li>
    </ul>
  </li>
</ul>
 
<div class="tab-content">
  <div id="panel1" class="tab-pane fade in active">
    <h3>Панель 1</h3>
    <p>Содержимое 1 панели...</p>
  </div>
  <div id="panel2" class="tab-pane fade">
    <h3>Панель 2</h3>
    <p>Содержимое 2 панели...</p>
  </div>
  <div id="panel3" class="tab-pane fade">
    <h3>Панель 3</h3>
    <p>Содержимое 3 панели...</p>
  </div>
  <div id="panel4" class="tab-pane fade">
    <h3>Панель 4</h3>
    <p>Содержимое 4 панели...</p>
  </div>
</div>

Answer 1

[hzzzzl]

с главной страницы ссылаться на например my_page.html#panel3
и тогда в my_page в яваскрипте будет доступно свойство location.hash ( "panel3" )
https://www.w3schools.com/jsref/prop_loc_hash.asp

при загрузке страницы смотреть location.hash, если совпадает с каким-нибудь табом, то его и показывать как здесь пишут

// подставить свои айдишники вместо mytabs tab3
$('#mytabs a[href="#tab3"]').tab('show')

https://stackoverflow.com/questions/53441935/open-...

Comments

[L1nw0od]

Для проверки хеша используем этот код верно ?

<script type="text/javascript">
$(function() {
    if (document.location.hash) {
        $(document.location.hash).click();
    }
});
</script>

С другой страницы ставлю такую ссылку, но при переходе таб 3 не становится активынм.
Использовал пример по ссылке выше
<a href="https://site/#tab3">Go </a>

[hzzzzl]

L1nw0od, я бы лучше все tab-pane забил в массив, и прошелся по нему, проверяя есть ли location.hash в массиве, чтобы не пытаться открыть таб которого не существует (юзер же может и вручную перейти на my_page.html#asdfasjlsdcj)

как-то так

[...document.querySelectorAll('.tab-pane')]  // массив
  .map(tab => tab.id)  // айдишники табов
  .includes(location.hash)  // true / false?

[L1nw0od]

hzzzzl, могли бы какой-то легкий пример с теми табами в кодепен сделать ?

[Алексей Ярков]

L1nw0od, если ответ Вам помог, то отметьте его, пожалуйста, решением.