HREF鏈接來引導導航選項卡不激活

Question

同一頁

上我已經實現psulek的解決方案從這裏：Twitter Bootstrap - Tabs - URL doesn't change允許在所有網站頁面的右側導航部分去與導航標籤頁，然後打開選定的選項卡，例如點擊搜索區下面的鏈接將帶您到index.html，然後選擇/打開＃區域形式

<p><a href="index.html#airport-form" >Airport Search</a></p> 
    <p><a href="index.html#postcode-form">Postcode Search</a></p> 
    <p><a href="index.html#region-form">Region Search</a></p> 

這除了自身的index.html，與標籤頁上的偉大工程。此頁面也有與上面相同鏈接的右側導航部分。如果機場搜索選項卡處於活動狀態，並且您單擊地域檢索鏈接，則URL變化/index.html#region-form但區域選項卡不激活。如果我手動刷新/重新加載頁面，則區域選項卡被激活。

我怎樣才能得到的index.html到「工作」的RH HREF鏈接自動並激活標籤，例如我想我想強制一個頁面重新加載index.html時點擊一個鏈接，但我不確定最好的方式來做到這一點。

Answer 1

這是一個通用示例，它將與nav-pills和導航標籤一起使用 允許任何鏈接也控制該「頁面」導航的選項卡。

HTML

<a href="#aaa" class="control-tabs">Another Link a</a> 
<a href="#bbb" class="control-tabs">Another Link b</a> 
<ul class="nav nav-tabs"> 
    <li><a href="#aaa" data-toggle="tab">AAA</a></li> 
    <li><a href="#bbb" data-toggle="tab">BBB</a></li> 
    <li><a href="#ccc" data-toggle="tab">CCC</a></li> 
</ul> 
<div class="tab-content" id="tabs"> 
    <div class="tab-pane" id="aaa">...Content...</div> 
    <div class="tab-pane" id="bbb">...Content...</div> 
    <div class="tab-pane" id="ccc">...Content...</div> 
</div> 

JS

 // Javascript to enable link to tab 
     var url = document.location.toString(); 
     console.log('url',url); 
     if (url.match('#')) { 
      var tid = url.split('#')[1]; 
      console.log('tid',tid); 
      $('.nav a[href$=#'+tid+']').tab('show') ; 
      window.scrollTo(0, 0); 
     } 

     // Change hash for page-reload 
     $('.nav a').on('shown.bs.tab', function (e) { 
      window.location.hash = e.target.hash; 
      window.scrollTo(0, 0); 
     }) 

     // other links to control tabs 
     $(".control-tabs").click(function(){ 
      var url = $(this).attr('href'); 
      console.log('url',url); 
      if (url.match('#')) { 
       var tid = url.split('#')[1]; 
       console.log('tid',tid); 
       $('.nav a[href$=#'+tid+']').tab('show') ; 
       window.scrollTo(0, 0); 
      } 
     }); 

的