페이지 새로 고침 후 트위터 부트 스트랩으로 현재 탭을 활성 상태로 유지 하시겠습니까?

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');은 data-toggle으로 링크 (태그)를 적용해야하는 동안 id = #{lastTab} 인 div에 .tab()을 적용합니다. 그러므로 여기에서 $('a[href=#' + lastTab + ']').tab('show');을 사용하십시오. 그래서 소스에서 활성 클래스를 제거 이 https://stackoverflow.com/a/16016592/1596547을보고 lastTab가 설정되지 않은 경우 활성 첫 번째 탭을 설정

    $(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'); 
         } 
        }); 

갱신을 :

완전한 기능을 사용할 수 있습니다.

Answer 2

푸시 스테이트를 선호합니다.

나에게 "웹 방식 ..."과 비슷해 보이기 때문에 내가 원하는 탭으로 바로 연결되는 외부 링크를 가질 수 있습니다.

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'); 
    } 
};