сохранить текущую вкладку активным с помощью twitter bootstrap после перезагрузки страницы?

Question

Я знаю, что этот вопрос был задан до и ответил следующее сообщение:

How do I keep the current tab active with twitter bootstrap after a page reload?

Однако, учитывая мое ограниченное знание сценариев, я не смог получить эту работу на моем сайте. После размещения кода на моей странице html вкладки по-прежнему переходят к первой и активной на перезагрузке страницы.

Возможно, кто-то может поделиться рабочим примером решения, представленного в ссылке выше.

Мой код выглядит следующим образом:

<div class="tabbable" style="margin-bottom: 8px;"> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a href="#tab1" data-toggle="tab">My Career Centre</a></li> 
      <li class=""><a href="#tab2" data-toggle="tab">Hiring Companies</a></li> 
      <li class=""><a href="#tab3" data-toggle="tab">Training Providers</a></li> 
      <li class=""><a href="#tab4" data-toggle="tab">Advertise</a></li> 
      <li class=""><a href="#tab5" data-toggle="tab">Graduate Opportunities</a></li> 
      <li class=""><a href="#tab6" data-toggle="tab">Career Forum</a></li> 
     </ul>   
     <script type="text/javascript"> 
        $(function() 
        { 
         $('a[data-toggle="tab"]').on('shown', function (e) { 
         //save the latest tab; use cookies if you like 'em better: 
         localStorage.setItem('lastTab', $(e.target).attr('id')); 
         }); 

         //go to the latest tab, if it exists: 
         var lastTab = localStorage.getItem('lastTab'); 
         if (lastTab) { 
          $('#'+lastTab).tab('show'); 
         } 
        }); 
      </script> 

     <div class="tab-content" style="padding: 0 5px;"> 
      <div class="tab-pane active" id="tab1"> 
       <div class="navbar" style="width:930px;"> 
        <div class="navbar-inner"> 
        <div class="container"> 
         <ul class="nav2" style="padding-top:0px;"> 
         <li><a href="#">Job Search</a></li> 
         <li><a href="#">Training Programmes</a></li> 
         <li><a href="#">Job Alerts</a></li> 
         <li><a href="#">My Job Applications</a></li> 
         <li><a href="#">My Studies</a></li> 
         <li><a href="http://localhost:8080/nationalcareers/JOBSEEKERS/index.php?category=home&action=received">Received Messages</a></li> 
         </ul> 
        </div> 
        </div> 
       </div> 
      </div> 
      <div class="tab-pane" id="tab2"> 
      <div class="navbar" style="width:900px;"> 
        <div class="navbar-inner"> 
        <div class="container"> 
         <ul class="nav2" style="padding-top:0px;"> 
         <li><a href="#">Manage Your Job Adverts</a></li> 
         <li><a href="#">Browse CV's</a></li> 
         <li><a href="#">Manage Job Applications</a></li> 
         <li><a href="http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=postings&action=my">View Reports For Your Adverts</a></li> 
         <li><a href="http://localhost:8080/nationalcareers/EMPLOYERS/index.php?category=home&action=sub_accounts">Manage Sub-Accounts</a></li> 
         </ul> 
        </div> 
        </div> 
       </div> 
      </div> 
      <div class="tab-pane" id="tab3"> 
      <div class="navbar" style="width:900px;"> 
        <div class="navbar-inner"> 
        <div class="container"> 
         <ul class="nav2" style="padding-top:0px;"> 
         <li><a href="#">Browse Training Programmes</a></li> 
         <li><a href="#">Browse Featured Training Providers</a></li> 
         </ul> 
        </div> 
        </div> 
       </div> 
      </div> 
      <div class="tab-pane" id="tab4"> 
      <div class="navbar" style="width:900px;"> 
        <div class="navbar-inner"> 
        <div class="container"> 
         <ul class="nav2" style="padding-top:0px;"> 
         <li><a href="#">Jobs</a></li> 
         <li><a href="#">Training Programmes</a></li> 
         <li><a href="#">Your Company</a></li> 
         <li><a href="#">Your Recruitment Agency</a></li> 
         </ul> 
        </div> 
        </div> 
       </div> 
      </div> 
      <div class="tab-pane" id="tab5"> 
      <div class="navbar" style="width:900px;"> 
        <div class="navbar-inner"> 
        <div class="container"> 
         <ul class="nav2" style="padding-top:0px;"> 
         <li><a href="#">Search Current Opportunities</a></li> 
         <li><a href="#">News and Updates</a></li> 
         <li><a href="#">Events</a></li> 
         </ul> 
        </div> 
        </div> 
       </div> 
      </div> 
      <div class="tab-pane" id="tab6"> 
      <div class="navbar" style="width:900px;"> 
        <div class="navbar-inner"> 
        <div class="container"> 
         <ul class="nav2" style="padding-top:0px;"> 
         <li><a href="#">Career Advice</a></li> 
         <li><a href="#">CV/Resume</a></li> 
         <li><a href="#">Interview Preparation</a></li> 
         <li><a href="#">Career Net-Work</a></li> 
         </ul> 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
</div> 

высоко ценится,

Answer 1

Как Tommi Komulainen писал: e.target содержит полный URL, включая хэш. Вам нужен только хэш. Поэтому используйте e.target.toString().split('#')[1]); или даже лучше $(this).attr('href') $('#'+lastTab).tab('show'); применяет .tab() на div с id = #{lastTab}, пока вам нужно применить к ссылке (тег) с помощью data-toggle. Поэтому используйте: $('a[href=#' + lastTab + ']').tab('show'); здесь.

Полная функция использование:

    $(function() 
        { 
         $('a[data-toggle="tab"]').on('shown', function() { 
         //save the latest tab; use cookies if you like 'em better: 
         localStorage.setItem('lastTab', $(this).attr('href')); 
         }); 

         //go to the latest tab, if it exists: 
         var lastTab = localStorage.getItem('lastTab'); 
         if (lastTab) { 
         $('a[href=' + lastTab + ']').tab('show'); 
         } 
         else 
         { 
         // Set the first tab if cookie do not exist 
         $('a[data-toggle="tab"]:first').tab('show'); 
         } 
        }); 

обновления: см https://stackoverflow.com/a/16016592/1596547 так удалить активный класс из источника и установите первую вкладку активной, когда lastTab не установлен.

Answer 2

Я предпочитаю использовать pushstate.

Это похоже на «Веб-путь ...» для меня, и это позволяет мне иметь внешние ссылки, указывающие прямо на вкладку, которую я хочу показать.

Это моя функция:

function setBootstrapTabs() 
{ 
    var activeTab = "#" + getParameterByName("submenu"); 

    $('a[data-toggle="tab"]').on('shown', function() { 
     //save the latest tab; 
     var new_url = updateUrlParam("submenu", 
      $(this).attr('href').replace("#","")); 
     window.history.replaceState({ 
       turbolinks: true, position: Date.now() 
      }, document.title, new_url 
     ); 
    }); 

    if (activeTab.length > 0) { 
     $('a[href=' + activeTab + ']').tab('show'); 
    } 
};