cotonti.com : Bootstrap localstorage nav-tab Сохранение вкладки при перезагрузки страницы https://www.cotonti.com Останні повідомлення в темі Cotonti en Sat, 11 Apr 2026 21:46:36 -0000 vpktz #46657 webitproff:

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

<div id="ajaxBlock">

этот  id ?

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

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

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

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

	<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="https://www.cotonti.com/{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="https://www.cotonti.com/{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="https://www.cotonti.com/{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="https://www.cotonti.com/{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="https://www.cotonti.com/{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="https://www.cotonti.com/{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

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

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

<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>

 

]]> Ср, 24 Травень 2023 08:29:46 -0000 webitproff  в шаблоне темы в header.tpl  есть

<div id="ajaxBlock">

этот  id ?

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

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

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

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

	<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="https://www.cotonti.com/{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="https://www.cotonti.com/{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="https://www.cotonti.com/{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="https://www.cotonti.com/{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="https://www.cotonti.com/{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="https://www.cotonti.com/{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>

 

]]> Вт, 23 Травень 2023 19:35:33 -0000 vpktz        

  <ul class="nav nav-tabs">
             <li class="nav-item">
                 <a class="nav-link active" id="home-tab" data-toggle="tab" href="https://www.cotonti.com/#tab-1">home</a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="folio-tab" data-toggle="tab" href="https://www.cotonti.com/#tab-2">folio</a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="product-tab" data-toggle="tab" href="https://www.cotonti.com/#tab-3">product</a>
             </li>
          <li class="nav-item">
                 <a class="nav-link" id="clients-tab" data-toggle="tab" href="https://www.cotonti.com/#tab-4">cliets</a>
             </li>
          <li class="nav-item">
                 <a class="nav-link" id="reviews-tab" data-toggle="tab" href="https://www.cotonti.com/#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 

]]> Вт, 23 Травень 2023 18:59:20 -0000