Как сделать якорь к нужному табу?

Question

[Saberwalker]

Здравствуйте!
есть такая разметка :

<div class="wpb_wrapper">
   <div class="norebro-tabs-sc tab-box  tabs-left" id="norebro-custom-5b1fe72b0b1fc" data-norebro-tab-box="true" data-options="{}">
      <div class="buttons-wrap">
         <div class="buttons" role="tablist">
            <div class="line brand-bg-color" style="width: 100px; transform: translateX(90.4844px);"></div>
            <h4 class="button">MASTERS</h4>
            <h4 class="button active undefined">MASTERS DAFA</h4>
         </div>
      </div>
      <div class="items" role="tabpanel" style="height: 45px;">
         <div class="item" data-title="MASTERS" id="1528805829388-21f8b5b1-7ac5">
            <div class="norebro-text-sc " id="norebro-custom-5b1fe72b0b514">
               <p style="text-align: center;">
            </div>
         </div>
         <div class="item target active" data-title="MASTERS DAFA" id="tab2">
            <div class="vc_row wpb_row vc_inner vc_row-fluid">
               <div class="wpb_column vc_column_container vc_col-sm-3">
                  <div class="vc_column-inner ">
                     <div class="wpb_wrapper">
                        <div class="norebro-text-sc " id="norebro-custom-5b1fe72b0e7dd">
                           <p>текст2</p>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="wpb_column vc_column_container vc_col-sm-3">
                  <div class="vc_column-inner ">
                     <div class="wpb_wrapper"></div>
                  </div>
               </div>
               <div class="wpb_column vc_column_container vc_col-sm-3">
                  <div class="vc_column-inner ">
                     <div class="wpb_wrapper"></div>
                  </div>
               </div>
               <div class="wpb_column vc_column_container vc_col-sm-3">
                  <div class="vc_column-inner ">
                     <div class="wpb_wrapper"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="clear"></div>
   </div>
   <div class="wpb_raw_code wpb_raw_js">
      <div class="wpb_wrapper">
         <script type="text/javascript">
            var item= window.location.hash; 
            item= item.replace("#", ""); 
         </script>
      </div>
   </div>
</div>

при переходе по ссылке с другой страницы вида link/#two не отображается активная вкладка.

Answer 1

[Максим Тимофеев]

не отображается активная вкладка.

А должна? С чего вдруг? Вы же не добавили спец тег:

<hochu open="active_tab" esli="two"  data-pozhaluista="true" token="poken"/>

А что по Вашему делает этот скрипт:

<script type="text/javascript">
            var item= window.location.hash; 
            item= item.replace("#", ""); 
         </script>

Просто интересно, какую роль Вы на него возложили?

Comments

[Saberwalker]

расстреляли в упор! C js у меня беда.

var tab = window.location.hash; // получим #1
tab = tab.replace("#", ""); // удаляем символ #, остается номер вкладки

[Максим Тимофеев]

Saberwalker,
Отлично теперь у Вас есть переменная со строкой внутри. Очень полезно )))) Вероятно стоит с ней что-то сделать?
Например проскролить страницу к элементу с id равному тому что у Вас в переменной? Или сделать активной вкладку с нужным id.
Я бы подсказал, но не вижу признака какого либо плагина, который бы управлял табами. Такое ощущение, что код вообще случайный))) Где Вы его взяли? Там наверное есть документация, api, методы, которые вкладку активируют.
Вот например табы в bs4:
https://getbootstrap.com/docs/4.0/components/navs/...
там бы было как-то так:

<script>
  $(function () {
         var tab = window.location.hash;
         tab = tab.replace("#", "");
         $('#' + tab).tab('show');
  })
</script>

[Saberwalker]

Максим Тимофеев, можно сказать с потолка. Я примерно понимаю что нужно сделать пошагово: убрать активный класс, найти #two, проскролить к табу, добавить .active, добавить клик по текущему активному элементу. Как это написать, это совсем непонятно.

[Максим Тимофеев]

Saberwalker,
в примитивном исполнении это будет

<script>
  $(function () {
         var tab = window.location.hash;
         tab = tab.replace("#", "");
         $('.tabs').removeClass('active'); //сделали все не активными
         $('#' + tab).addClass('active'); //добавили класс актив нужной
  })
</script>

что мешает почитать про js (jquery)? Освоить за пару дней можно в базовом варианте.