URL-адрес привязки, затем откройте вкладку, используя другой идентификатор по URL-адресу

Question

Мне нужен параметр URL, чтобы выбрать раздел с помощью идентификатора хэша (#features), а затем открыть вкладку №2 в этом разделе (вкладка 1 открыта по умолчанию) , Я хочу использовать функции index.html #, а затем, когда он найдет этот раздел, откройте вкладку # 2 (# tab2).

My js ниже ищет хеш в URL-адресе, если показан хеш, вызывать эффект щелчка для хэша. Я пытался использовать index.html # tab2, но он не будет перемещаться в этот раздел #features и поэтому я не уверен, как это решить.

Раздел #features находится в нижней части страницы, поэтому мне нужно сначала найти этот раздел, а затем открыть вторую вкладку.

JS Fiddle

<article id="features"> 
    <div class="tab-wrapper"> 
     <ul class="tab-wrapper__tab-list" role="tablist"> 
      <li role="presentation"> 
       <a href="#tab1" role="tab" aria-controls="panel0">Tab One</a> 
      </li> 
      <li role="presentation"> 
       <a href="#tab2" role="tab" aria-controls="panel1">Tab Two</a> 
      </li> 
      <li role="presentation"> 
       <a href="#tab3" role="tab" aria-controls="panel2">Tab Three</a> 
      </li> 
     </ul> 

     <div id="tab1" class="tab-wrapper__tab" role="tabpanel"> 
      <div class="tab-wrapper__content-wrapper"> 
       <p>Lorem ipsum dolor sit amet, nam an purto autem contentiones. Cum solet verear petentium ut, an incorrupte interesset sit, eu sea dicant suscipit definiebas. Ut illum habemus sententiae sea, nec nibh accusata an. Tempor dissentias ea nam. Utinam volutpat sed at, dicta errem cu est.</p> 
      </div> 
     </div> 

     <div id="tab2" class="tab-wrapper__tab" role="tabpanel"> 
      <div class="tab-wrapper__content-wrapper"> 
       <p>Vel zril putent incorrupte ei. Cu tation veniam euripidis vel, diceret minimum deserunt an ius. Eam ex probatus laboramus, cum ad noluisse suscipit, everti accusata id eam. Ius et commune recusabo, id munere alterum mei. Rebum oratio malorum usu te, no feugait inciderint eos. Eum viderer deseruisse instructior at. Nusquam expetenda eam et.</p> 
      </div> 
     </div> 

     <div id="tab3" class="tab-wrapper__tab" role="tabpanel"> 
      <div class="tab-wrapper__content-wrapper"> 
       <p>Tacimates consetetur his eu. Amet persecuti an eum, ne facete audiam mei. Pri et alia urbanitas, dicunt tacimates eos eu. Ut sit inani urbanitas. Has in equidem atomorum accommodare. Te vim decore cetero intellegebat. Saepe timeam posidonium pro te, nulla insolens adipisci ne vis.</p> 
      </div> 
     </div> 
    </div> 
</article> 

<script> 
    $(function() { 
     var hash = $.trim(window.location.hash); 

     if (hash) $('.tab-wrapper__tab-list a[href$="'+ hash +'"]').trigger('click'); 
    }); 
</script> 

Answer 1

Вы пробовали прокруткой кнопку вкладки с #tab2 в URL? Это позволит решить вашу проблему при прокрутке вниз до раздела функций, поскольку элемент #tab2 находится поверх раздела функций.

JSFiddle запускается в iframe, и вам необходимо предоставить хэш внутри ссылки iframe. Обходным путем для этого является установка хэша с помощью JavaScript. Если вы установили window.location.hash = "tab2"; в качестве первой строки в вашем разделе сценария, она прокручивается вниз и отображает вторую вкладку.

Если вы настаиваете на прокрутке к элементу #features, вы можете понять, что довольно легко с JavaScript. Это позволяет также создавать анимированную прокрутку вплоть до раздела. См. Этот ответ для получения дополнительной информации: https://stackoverflow.com/a/16475234/3233827