ページをリロードした後、現在のタブをtwitterブートストラップでアクティブに保ちますか？

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> 

、Tommi Komulainenとして

Answer 1

は書きました：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');をここで使用してください。

使用するための完全な機能：

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

更新： ので、あなたのソースからアクティブなクラスを削除し、lastTabが設定されていないときにアクティブな最初のタブを設定https://stackoverflow.com/a/16016592/1596547を参照してください。

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