Forums / National / Russian / Тех. поддержка / Bootstrap localstorage nav-tab Сохранение вкладки при перезагрузки страницы

vpktz Online
#1 2023-05-23 18:59

Members
Bedankt: 10 tijden

       

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
  <ul class="nav nav-tabs">
             <li class="nav-item">
                 <a class="nav-link active" id="home-tab" data-toggle="tab" href="#tab-1">home</a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="folio-tab" data-toggle="tab" href="#tab-2">folio</a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="product-tab" data-toggle="tab" href="#tab-3">product</a>
             </li>
          <li class="nav-item">
                 <a class="nav-link" id="clients-tab" data-toggle="tab" href="#tab-4">cliets</a>
             </li>
          <li class="nav-item">
                 <a class="nav-link" id="reviews-tab" data-toggle="tab" href="#tab-5">reviews</a>
             </li>
         </ul>
 
         <div class="tab-content">
             <div class="tab-pane fade show active" id="tab-1">
                 <h3>Вкладка #1</h3>
             </div>
             <div class="tab-pane fade" id="tab-2">
                 <h3>Вкладка #2</h3>
             </div>
             <div class="tab-pane fade" id="tab-3">
                   <h3>Вкладка #3</h3>
             </div>
          <div class="tab-pane fade" id="tab-4">
                   <h3>Вкладка #4</h3>
             </div>
          <div class="tab-pane fade" id="tab-5">
                   <h3>Вкладка #5</h3>
             </div>
         </div>
 
         <script>
            $(function($){
              var storage = document.cookie.match(/nav-tabs=(.+?);/);
              if (storage && storage[1] !== "#") {
                  $('.nav-tabs a[href="' + storage[1] + '"]').tab('show');
              }
              $('ul.nav li').on('click', function() {
                  var id = $(this).find('a').attr('href');
                  document.cookie = 'nav-tabs=' + id;
              });
          });
         </script>

 Есть такой код + скрипт который позволяет оставаться на выбранной вкладке даже после перезагрузке странице. И он работает, за исключением того что при выборе любой из вкладки выкидывает на главную сайта + ссылка вкладки. Например https://site.ru/#tab-2.   А так как этот nav-tab находиться на странице Пользователя модуля Users по адресу  

https://site.ru/users/Администратор  то получается нужно на этой странице и оставаться и будет все норм.  Так как если вернуться опять с главной (на которую выкинуло) на страницу пользователя то мы увидим что сохранение вкладки состоялось и все хорошо. Осталось теперь добиться что бы не выкидывало на главную. Понимаю что надо как то в скрипт добавить ссылку на пользователя {USERS_DETAILS_DETAILSLINK} что бы при нажатии на вкладку получалось что то типа https://site.ru/users/Администратор/#tab-2 в место   https://site.ru/#tab-2 
webitproff
#2 2023-05-23 19:35

Banned
Bedankt: 102 tijden

 в шаблоне темы в header.tpl  есть

1
<div id="ajaxBlock">

этот  id ?

Добавлено 2 минуты спустя:

еще и от  темы зависит, от бутстрапа...

Добавлено 3 минуты спустя:

вот стартовый вариант

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<div class="span9">
  <div class="pull-right">
    <!-- IF {USERS_DETAILS_ISPRO} -->
    <span class="label label-important">PRO</span>
    <!-- ENDIF -->
    <span class="label label-info">{USERS_DETAILS_USERPOINTS}</span>
  </div>
  <div class="tabbable">
    <ul class="nav nav-tabs">
      <li <!-- IF !{PHP.tab} --> class="active"
        <!-- ENDIF -->> <a href="{USERS_DETAILS_DETAILSLINK}#tab_info" data-toggle="tab">{PHP.L.Main}</a>
      </li>
      <!-- IF {PHP.cot_modules.folio} -->
      <li <!-- IF {PHP.tab}=='portfolio' --> class="active"
        <!-- ENDIF -->> <a href="{USERS_DETAILS_FOLIO_URL}#tab_portfolio" data-toggle="tab">{PHP.L.folio} {USERS_DETAILS_FOLIO_COUNT}</a>
      </li>
      <!-- ENDIF -->
      <!-- IF {PHP.cot_modules.market} -->
      <li <!-- IF {PHP.tab}=='market' --> class="active"
        <!-- ENDIF -->> <a href="{USERS_DETAILS_MARKET_URL}#tab_market" data-toggle="tab">{PHP.L.market} {USERS_DETAILS_MARKET_COUNT}</a>
      </li>
      <!-- ENDIF -->
      <!-- IF {PHP.cot_modules.projects} -->
      <li <!-- IF {PHP.tab}=='projects' --> class="active"
        <!-- ENDIF -->> <a href="{USERS_DETAILS_PROJECTS_URL}#tab_projects" data-toggle="tab">{PHP.L.projects_projects} {USERS_DETAILS_PROJECTS_COUNT}</a>
      </li>
      <!-- ENDIF -->
      <!-- IF {PHP.cot_plugins_enabled.reviews} -->
      <li <!-- IF {PHP.tab}=='reviews' --> class="active"
        <!-- ENDIF -->> <a href="{USERS_DETAILS_REVIEWS_URL}#tab_reviews" data-toggle="tab">{PHP.L.reviews_reviews} {USERS_DETAILS_REVIEWS_COUNT}</a>
      </li>
      <!-- ENDIF -->
      <!-- IF {PHP.cot_plugins_enabled.sbr} -->
      <li>
        <a href="{USERS_DETAILS_ID|cot_url('sbr', 'm=add&uid='$this)}">Предложить сделку</a>
      </li>
      <!-- ENDIF -->
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane
        <!-- IF !{PHP.tab} --> active
        <!-- ENDIF -->" id="tab_info">
      <table class="table">
        <!-- IF {PHP.cot_modules.pm} -->
        <tr>
          <td>{PHP.L.users_sendpm}:</td>
          <td>{USERS_DETAILS_PM}</td>
        </tr>
        <!-- ENDIF -->
        <tr>
          <td width="220">{PHP.L.Country}:</td>
          <td>{USERS_DETAILS_COUNTRYFLAG} {USERS_DETAILS_COUNTRY}</td>
        </tr>
        <tr>
          <td width="170">{PHP.L.Location}:</td>
          <td>{USERS_DETAILS_REGION} {USERS_DETAILS_CITY}</td>
        </tr>
        <tr>
          <td>{PHP.L.Timezone}:</td>
          <td>{USERS_DETAILS_TIMEZONE}</td>
        </tr>
        <tr>
          <td>{PHP.L.Birthdate}:</td>
          <td>{USERS_DETAILS_BIRTHDATE}</td>
        </tr>
        <tr>
          <td>{PHP.L.Age}:</td>
          <td>{USERS_DETAILS_AGE}</td>
        </tr>
        <tr>
          <td>{PHP.L.Gender}:</td>
          <td>{USERS_DETAILS_GENDER}</td>
        </tr>
        <tr>
          <td>{PHP.L.Registered}:</td>
          <td>{USERS_DETAILS_REGDATE}</td>
        </tr>
      </table>
    </div>
    <div class="tab-pane
        <!-- IF {PHP.tab} == 'portfolio' --> active
        <!-- ENDIF -->" id="tab_portfolio"> {PORTFOLIO} </div>
    <div class="tab-pane
        <!-- IF {PHP.tab} == 'market' --> active
        <!-- ENDIF -->" id="tab_market"> {MARKET} </div>
    <div class="tab-pane
        <!-- IF {PHP.tab} == 'projects' --> active
        <!-- ENDIF -->" id="tab_projects"> {PROJECTS} </div>
    <div class="tab-pane
        <!-- IF {PHP.tab} == 'reviews' --> active
        <!-- ENDIF -->" id="tab_reviews"> {REVIEWS} </div>
  </div>
</div>

 

аккаунт удален - не срослось с разработчиками
ушел на другой движок
vpktz Online
#3 2023-05-24 08:29

Members
Bedankt: 10 tijden

#46657 webitproff:

 в шаблоне темы в header.tpl  есть

1
<div id="ajaxBlock">

этот  id ?

Добавлено 2 минуты спустя:

еще и от  темы зависит, от бутстрапа...

Добавлено 3 минуты спустя:

вот стартовый вариант

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<div class="span9">
  <div class="pull-right">
    <!-- IF {USERS_DETAILS_ISPRO} -->
    <span class="label label-important">PRO</span>
    <!-- ENDIF -->
    <span class="label label-info">{USERS_DETAILS_USERPOINTS}</span>
  </div>
  <div class="tabbable">
    <ul class="nav nav-tabs">
      <li <!-- IF !{PHP.tab} --> class="active"
        <!-- ENDIF -->> <a href="{USERS_DETAILS_DETAILSLINK}#tab_info" data-toggle="tab">{PHP.L.Main}</a>
      </li>
      <!-- IF {PHP.cot_modules.folio} -->
      <li <!-- IF {PHP.tab}=='portfolio' --> class="active"
        <!-- ENDIF -->> <a href="{USERS_DETAILS_FOLIO_URL}#tab_portfolio" data-toggle="tab">{PHP.L.folio} {USERS_DETAILS_FOLIO_COUNT}</a>
      </li>
      <!-- ENDIF -->
      <!-- IF {PHP.cot_modules.market} -->
      <li <!-- IF {PHP.tab}=='market' --> class="active"
        <!-- ENDIF -->> <a href="{USERS_DETAILS_MARKET_URL}#tab_market" data-toggle="tab">{PHP.L.market} {USERS_DETAILS_MARKET_COUNT}</a>
      </li>
      <!-- ENDIF -->
      <!-- IF {PHP.cot_modules.projects} -->
      <li <!-- IF {PHP.tab}=='projects' --> class="active"
        <!-- ENDIF -->> <a href="{USERS_DETAILS_PROJECTS_URL}#tab_projects" data-toggle="tab">{PHP.L.projects_projects} {USERS_DETAILS_PROJECTS_COUNT}</a>
      </li>
      <!-- ENDIF -->
      <!-- IF {PHP.cot_plugins_enabled.reviews} -->
      <li <!-- IF {PHP.tab}=='reviews' --> class="active"
        <!-- ENDIF -->> <a href="{USERS_DETAILS_REVIEWS_URL}#tab_reviews" data-toggle="tab">{PHP.L.reviews_reviews} {USERS_DETAILS_REVIEWS_COUNT}</a>
      </li>
      <!-- ENDIF -->
      <!-- IF {PHP.cot_plugins_enabled.sbr} -->
      <li>
        <a href="{USERS_DETAILS_ID|cot_url('sbr', 'm=add&uid='$this)}">Предложить сделку</a>
      </li>
      <!-- ENDIF -->
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane
        <!-- IF !{PHP.tab} --> active
        <!-- ENDIF -->" id="tab_info">
      <table class="table">
        <!-- IF {PHP.cot_modules.pm} -->
        <tr>
          <td>{PHP.L.users_sendpm}:</td>
          <td>{USERS_DETAILS_PM}</td>
        </tr>
        <!-- ENDIF -->
        <tr>
          <td width="220">{PHP.L.Country}:</td>
          <td>{USERS_DETAILS_COUNTRYFLAG} {USERS_DETAILS_COUNTRY}</td>
        </tr>
        <tr>
          <td width="170">{PHP.L.Location}:</td>
          <td>{USERS_DETAILS_REGION} {USERS_DETAILS_CITY}</td>
        </tr>
        <tr>
          <td>{PHP.L.Timezone}:</td>
          <td>{USERS_DETAILS_TIMEZONE}</td>
        </tr>
        <tr>
          <td>{PHP.L.Birthdate}:</td>
          <td>{USERS_DETAILS_BIRTHDATE}</td>
        </tr>
        <tr>
          <td>{PHP.L.Age}:</td>
          <td>{USERS_DETAILS_AGE}</td>
        </tr>
        <tr>
          <td>{PHP.L.Gender}:</td>
          <td>{USERS_DETAILS_GENDER}</td>
        </tr>
        <tr>
          <td>{PHP.L.Registered}:</td>
          <td>{USERS_DETAILS_REGDATE}</td>
        </tr>
      </table>
    </div>
    <div class="tab-pane
        <!-- IF {PHP.tab} == 'portfolio' --> active
        <!-- ENDIF -->" id="tab_portfolio"> {PORTFOLIO} </div>
    <div class="tab-pane
        <!-- IF {PHP.tab} == 'market' --> active
        <!-- ENDIF -->" id="tab_market"> {MARKET} </div>
    <div class="tab-pane
        <!-- IF {PHP.tab} == 'projects' --> active
        <!-- ENDIF -->" id="tab_projects"> {PROJECTS} </div>
    <div class="tab-pane
        <!-- IF {PHP.tab} == 'reviews' --> active
        <!-- ENDIF -->" id="tab_reviews"> {REVIEWS} </div>
  </div>
</div>

Ура!!! спасибо!!!! blushyes

Дефолтная действительно работает.  Целый день вчера убил на гугл а оказалось просто изобретаю велосипед.

Только скрипт надо не забыть, без него не работает

1
2
3
4
5
6
7
8
9
10
11
12
<script>
            $(function($){
            var storage = document.cookie.match(/nav-tabs=(.+?);/);
            if (storage && storage[1] !== "#") {
                $('.nav-tabs a[href="' + storage[1] + '"]').tab('show');
            }
            $('ul.nav li').on('click', function() {
                var id = $(this).find('a').attr('href');
                document.cookie = 'nav-tabs=' + id;
            });
          });
         </script>